A scroll bar could be added to a div by applying the overflow property in CSS.
.scrollable {
height: 100px;
overflow-y: scroll;
}
The above style will limit the height of the scrollable div and add a vertical scroll bar to it. For a horizontal scroll bar, just use overflow-x instead of overflow-y.
Try the following example and see how it works.
<html>
<head>
<title>Add scroll bar to a div</title>
<style type="text/css">
.scrollable {
height: 100px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scrollable">
<table>
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
</tr>
<tr>
<td>row 4</td>
</tr>
<tr>
<td>row 5</td>
</tr>
<tr>
<td>row 6</td>
</tr>
<tr>
<td>row 7</td>
</tr>
<tr>
<td>row 8</td>
</tr>
</table>
</div>
</body>
</html>
Done =)
Reference: W3Schools – CSS overflow Property
Eureka! 
Hi, nice and clear example! you know something on masking the default scrollbar with a custom slider?
LikeLike
Thanks for your comment. i haven’t tried styling the scrollbar before but probably it could be customized by some jQuery plugins. you could find some in the following link.
net-kit.com – 10 jQuery Custom Scrollbar Plugins
Hope this help. =)
LikeLike