- How do you add a scroll bar to a div?
- 9 Answers 9
- Linked
- Related
- Hot Network Questions
- Subscribe to RSS
- How TO — Custom Scrollbar
- How To Create Custom Scrollbars
- Example
- Example
- Scrollbar Selectors
- How To Create a Custom Scrollbar in CSS
- Default Scrollbar Example.
- Custom Scrollbar Example.
- Create a custom vertical scrollbar. #
- How to create a custom horizontal scrollbar. #
- Hide bottom right corner box of the scrollbar. #
How do you add a scroll bar to a div?
I have a popup that displays some results, and I want a scroll bar to be display since the results are being cutt off (and I don’t want the popup to be too long).
9 Answers 9
You need to add style=»overflow-y:scroll;» to the div tag. (This will force a scrollbar on the vertical).
If you only want a scrollbar when needed, just do overflow-y:auto;
Css class to have a nice Div with scroll
.DivToScroll < background-color: #F5F5F5; border: 1px solid #DDDDDD; border-radius: 4px 0 4px 0; color: #3B3C3E; font-size: 12px; font-weight: bold; left: -1px; padding: 10px 7px 5px; >.DivWithScroll
to add scroll u need to define max-height of your div and then add overflow-y
so do something like this
If you want to add a scroll bar using jquery the following will work. If your div had a id of ‘mydiv’ you could us the following jquery id selector with css property:
jQuery('#mydiv').css("overflow-y", "scroll"); @Chaki_Black great point. I added a similar answer to a question about dynamic scroll on a div here (stackoverflow.com/a/36314963/2512022)
This method is a bit outdated, even if dynamic selection is required. Modern DOM have more or less deprecated jQuery. See blog.garstasio.com/you-dont-need-jquery/selectors or any number of similar articles for supplemental information.
@webdestroya: It will only add scrolling to divs that have the classname of «scrollingDiv». That could be as few as 1, or even 0, or as many as all the divs the designer wishes to have scrollbars.
@Robusto — Yea, I meant gmcalab edited it. Originally it just said div in the spec, it didn’t have the class. Either way, I removed my comment because it is now fixed.
div.scroll You can use the overflow property when you want to have better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better