How can I add a vertical scrollbar to my div automatically?

CssHtmlScrollbarOverflow

Css 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:

http://jsfiddle.net/MitulP91/xEy9E/3/">JSFiddle</a>

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);
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjayView Question on Stackoverflow
Solution 1 - CssMr_GreenView Answer on Stackoverflow
Solution 2 - CssDevTView Answer on Stackoverflow
Solution 3 - CssAtaboy JosefView Answer on Stackoverflow
Solution 4 - CssRicardo RomoView Answer on Stackoverflow
Solution 5 - CssMitulP91View Answer on Stackoverflow
Solution 6 - CssGURU PRASADView Answer on Stackoverflow