How can I add a vertical scrollbar to my div automatically?
CssHtmlScrollbarOverflowCss Problem Overview
I want to add a vertical scrollbar to my <div>
. I've tried overflow: auto
, but it is not working. I've tested my code in Firefox and Chrome.
I'm pasting the div style code here:
float: left;
width: 1000px;
overflow: auto;
Css Solutions
Solution 1 - Css
You need to assign some height to make the overflow: auto;
property work.
For testing purpose, add height: 100px;
and check.
and also it will be better if you give overflow-y:auto;
instead of overflow: auto;
, because this makes the element to scroll only vertical but not horizontal.
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
If you don't know the height of the container and you want to show vertical scrollbar when the container reaches a fixed height say 100px
, use max-height
instead of height
property.
For more information, read this MDN article.
Solution 2 - Css
You have to add max-height
property.
.ScrollStyle
{
max-height: 150px;
overflow-y: scroll;
}
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>
Solution 3 - Css
I got an amazing scroller on my div-popup
. To apply, add this style to your div element:
overflow-y: scroll;
height: XXXpx;
The height
you specify will be the height of the div and once if you have contents to exceed this height, you have to scroll it.
Thank you.
Solution 4 - Css
To show vertical scroll bar in your div you need to add
height: 100px;
overflow-y : scroll;
or
height: 100px;
overflow-y : auto;
Solution 5 - Css
I'm not quite sure what you're attempting to use the div for, but this is an example with some random text.
Mr_Green gave the correct instructions when he said to add overflow-y: auto
as that restricts it to vertical scrolling. This is a JSFiddle example:
Solution 6 - Css
Since OS X Lion, the scrollbar on websites are hidden by default and only visible once you start scrolling. Personally, I prefer the hidden scrollbar, but in case you really need it, you can overwrite the default and force the scrollbar in WebKit browsers back like this:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}