Add Scroll bar to div

By | October 10, 2012

Generally scroll bars are available in browser and in drop down listbox. Scroll bars are used to put large amount content in some fixed area, when users wants to see next item then he have to scroll the scroll bar.

overflow: scroll css property is used to make a scroll bar in div element.

When we use overflow:scroll, scroll bar will appear for both X and Y direction.

For X direction only : overflow-x: scroll

For Y direction only : overflow-y: scroll

Stylesheet

[code type=css]
#widget
{
width: 300px;
height: 150px;
overflow: scroll;
}
[/code]

HTML

[code type=html]
<html>
<body>
<div id=”widget”>

1 <br/>
2 <br/>
3 <br/>
4 <br/>
5 <br/>
6 <br/>
</div>

</body>
</html>
[/code]

 

Demo

1

2

3

4

5

6

Leave a Reply

Your email address will not be published. Required fields are marked *