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
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;
-
Would the div being positioned absolutely prevent the scrollbar from working? Aug 15 at 14:36
-
@DavidSpector just tested it, it still works for an absolutely positioned div. jsfiddle.net/Ld3mb1y0 Aug 23 at 0:22
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{
height:120px;
overflow:scroll;
overflow-x:hidden;
}
to add scroll u need to define max-height of your div and then add overflow-y
so do something like this
.my_scroll_div{
overflow-y: auto;
max-height: 100px;
}
-
When I try this, I get the same behavior as overflow-y: hidden. What could be wrong? Aug 15 at 14:41
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");
-
1It is correct, where need to add it dinamically with jquery. It works for me. Thanks Feb 23, 2015 at 9:59
-
@Chaki_Black great point. I added a similar answer to a question about dynamic scroll on a div here (stackoverflow.com/a/36314963/2512022)– ScottyGMar 30, 2016 at 16:50
-
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. Jul 7, 2020 at 21:24
<div class="scrollingDiv">foo</div>
div.scrollingDiv
{
overflow:scroll;
}
-
@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.– RobustoMay 14, 2010 at 19:07
-
@webdestroya: I didn't touch it. And the post didn't show as being edited when I commented. W/e.– RobustoMay 14, 2010 at 19:28
-
@Robusto - I think he was referring that I edited it. Because I did edit it to make it more clear.– GabeMay 14, 2010 at 19:30
-
@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. May 14, 2010 at 19:31
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}
</style>
</head>
<body>
<div class="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 </div>
</body>
</html>
If you have a CSS file, you can define a call for the <div>
element and assign the overflow: auto
CSS property.
In the HTML file: <div class="container">
In the CSS file you put:
.container{
overflow: "auto";
}
There are multiple ways to achieve a scroller on a div, here find a simple easy way
one with an easy explanation
.
.my_scroll_div {
overflow-y: auto;
max-height: 100px;
}
Here is a bit explanation of the above code.
overflow-y: auto;
The overflow-y
property of CSS adds a scroller when needed, If we want to add the scroller after a specific height (e.g 100px in our case)
Then,
max-height: 100px;
We add the max-height
property of CSS so for example to add a scroller after 100px
of height then max-height: 100px;
is used.
I hope this explanation is helpful in clearing the concepts as well.
<html>
<head>
<style>
div.scroll {
max-height: 50px;
overflow: scroll;
}
</style>
</head>
<body>
<div class="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
</div>
</body>
</html>