How Do You Add a Scroll Bar to a Div?

Question

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).

Accepted Answer

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;

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

<div class="scrollingDiv">foo</div> 

div.scrollingDiv
{
   overflow:scroll;
}

Answer 6

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

Answer 7

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

How Do You Add a Scroll Bar to a Div?

7 Answers

Must Read

Your Answer

Sophia Al-Mansoor

How Do You Add a Scroll Bar to a Div?

7 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Sophia Al-Mansoor