Is there a scrollbar element in HTML ?
If not, how can a scrollbar be created? I tried using a div with overflow but the problem is that I have to add content in order for the scrollbar to appear, and if I add content it will be visible.
CSS:
.h-scrollbar {
overflow-x: scroll;
width: 300px;
}
.h-scrollbar div {
width: 1000px;
display:block;
}
HTML:
<div class="h-scrollbar"><div>text</div></div>
Here is a demo: http://jsfiddle.net/4e8jbbc0/1/
How can I get only the scrollbar?
You can use the below css class to hide text and get scroll bar element only
.h-scrollbar div {
width: 1000px;
display:block;
visibility: hidden;
height:0px
}
Related
<html>
<body>
<div class="container">
<div class="menu"></div>
<div class="list"></div>
</div>
</body>
</html>
.menu{
float:left;
width:50%;
}
.list{
float:right;
width:50%;
}
how to disable the whole html's scroll. but the menu div and list div can scroll vertically?
and dependently?
I mean when I scroll the left div the right div do not have to scroll together.
You need to start from the html tag down. It and all parents of your scrollable elements should have the height of the viewport.
This means that the html, body, .container and both scrollable elements should have a height: 100% or height: 100vh.
Then you can make the scrollable elements actually scroll independently by adding overflow: hidden.
If this doesn't make sense, please see this pen which I made for you.
You need to prevent vertical scrolling on your .container. This can be done by using the overflow CSS property. Look at the code below on how you can achieve this and also enable vertical scrolling for your two elements (.list and .menu).
body {
margin: 0;
padding: 0;
}
.container {
max-height: 100vh;
height: 100vh;
overflow-y: hidden;
display: flex;
}
.menu {
overflow-y: auto;
width:50%;
}
.list {
overflow-y: auto;
width:50%;
}
I have an error using overflow:auto.
The error: http://cl.ly/image/0K1W3t151T0S
The code I used http://codepen.io/sebazelonka/pen/pDGin
Even when the height of the content has the same height than container, the scrollbar is visible. I tried different options, but the error persist.
I tried it in different browsers, including FF, Chrome, Safari and Opera, and always have the same error.
HTML
<div class="image-viewport portrait" style="width: 100%; height: 400px;">
<div class="image-wrapper" style="width: 100%; height: 400px;">
<img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/landscape_7.jpg">
</div>
</div>
CSS
body {
background: #999;
}
.image-viewport {
overflow: auto;
}
.image-wrapper {
background: #333;
text-align: center;
}
.image-viewport.portrait img {
height: 100%;
}
Here are 2 different solutions:
Add vertical-align:top to the img element. (default is vertical-align:baseline)
Change the img to a block level element.
Updated Codepen example using vertical-align:top
.image-viewport.portrait img {
height: 100%;
vertical-align:top;
}
Updated Codepen example using display:block
Note: For horizontal centering, use margin:0 auto, as text-align:center will no longer work, as the element is not an inline element anymore.
.image-viewport.portrait img {
height: 100%;
display:block;
margin:0 auto;
}
Also, don't be confused with the scrollbar added on the body if the window is too small. The scrollbar on the img wrapper has been removed.
Just change your .image-viewport class to this:
.image-viewport {
overflow: hidden;
}
I've got a list with certain height, and need to make it scroll to show the rest vertically.
So I added overflow-y: hidden; to the list.
But the submenu can't be visible, and a horizontal scrollbar showed.
Is there any solution?
code here
Simply increase the width of the .wrapper
.wrapper {
margin: 20px;
background: gray;
color: white;
width: 400px;
height: 100px;
/* I need overflow-y auto,but I also need to display the submenu*/
overflow-y: auto;
overflow-x: visible;
}
I am trying to prevent the scroll bar from appearing when the div .boxB overflows and I am unsure why my code is not working. In other words, I am trying to remove the horizontal scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then .boxA.
http://imgur.com/yQDFG
The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used overflow-x:hidden but that did not do the trick.
HTML:
<div class="boxA">boxA
<div class="boxB">boxB</div>
</div>
CSS:
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}
May be, overflow-x: hidden; must be uses for .boxA?
You just need to write
overflow: hidden
Try this css:
.boxA {
background: yellow;
width: 800px;
height: 600px;
overflow-x: hidden;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
}
overflow must be on a tag which wraps too large content (in your case - boxA wraps boxB). So, if you do not want something to go outside wrapper - you must put overflow on wrapper
In your HTML code, boxeA is the parent and Box B is the child.
CSS property overflow used like this :
.boxeA
{
overflow: hidden;
}
will prevent a part of the boxeB (which is the child of boxeA) to be displayed when it is more bigger than it's own parent.
boxeA is like a mask on boxeB.
in the url you have given, to prevent the aqua boxe to be entirly displayed, you have to put the aqua boxe as a child of the light blue one,
and give the light blue box a css property like this :
.light_blue
{
overflow: hidden;
}
Now that I understand what you want, here is a possible solution:
http://jsfiddle.net/dy8g5/3/
Parameters:
.boxB must be visible outside of .boxA, with no horizontal scrollbar.
The browser should not have a horizontal scrollbar, if the browser width is smaller than the width of .boxB
The solution was to use a media query to hide the horizontal scrollbar, IF the browser width is smaller than the width of .boxB
#media all and (max-width: 1001px) {
body {
overflow-x: hidden;
}
}
#media all and (max-width: 801px) {
body {
overflow-x: visible;
}
}
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}
How can I add a horizontal scroll bar to a table that is inside a div?
Is there CSS solution for this?
You will not be able to add a scrollbar to a table, but you can add it to a DIV containing your table.
For example:
<div style="width: 400px; height: 200px; overflow: scroll;">
<table>...</table>
</div>
If you only want a horizontal scrollbar use overflow-x:auto; then set the width.
div
{
width: 300px;
overflow-x:auto;
overflow-y:hidden;
}
To add the scrollbar use overflow:
div {
width: 100px;
overflow: auto;
}
You have to add width to the table too:
table {
width: 300px;
}
http://jsfiddle.net/tpDGE/
Try it:
div {
display: block;
height: 200px;
overflow: scroll;
}