make DIV Scrollable using html,css and javascript

Edit :

jQuery plugin for this type of scrolling : jScrollPane - cross browser styleable scrollbars with jQuery and CSS

Org:

just set style="overflow:auto" will do for you

<div style="overflow:auto;width:100px;height:100px;" > content </div>

you need to set height and width of div as given above

The basic approach to making a div scrollable is to limit its width and height to something smaller than is required by its content, and to apply overflow: auto.

If you want to build a custom implementation, such as Facebook has, you would instead set overflow: hidden so that the div sticks to its width and height, and simply hides anything that does not fit, and build your own controls to move the content up and down.

The custom scrollbar that facebook has implemented uses a combination of several javascript and CSS features:

• The scrollbar is shown/hidden based on mouse hover
• Scrollbar size is adjusted according to length of content
• Scrollbar is draggable
• Dragging scrollbar moves the content within the div
• The script manually listens to the scroll wheel to invoke custom scrolling

The purpose of Stack Overflow is not for us to build your entire component. If there is any single feature listed above that you cannot work out how to build, you should ask a question about that, and point out what you've tried.

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

and your script:

 div.scrollingDiv {    overflow:scroll; } 

Try iScroll. It supports both mobile devices and the browsers.

Facebook (and Google Reader) use custom scrollbar styling which is available as a non-standard part of CSS. Check out http://www.webkit.org/blog/363/styling-scrollbars/ for implementation details.

It's worth noting that you will still need to have the overflow set to either auto or scroll for users that are in browsers that don't support the custom scroll bars.