how to make a nice scroll bar in a webpage html

Question

I have seen some web pages have a very nice scroll bar when a div element overflows.It's not the default one and looks like scroll bars in iPhone.A good example is twitter's when you click on someone to see more information.I'm not sure I'm putting this clearly...

I have a div to display in my page and it's likely to overflow and when it does,I want a nice scroll bar with it,not the default one.Someone knows how to accomplish that?Or there's some open source project I can use? Thanks a lot!

Solution

There are 100s of options available for custom scroll bars these days. They're usually as simple as assigning a class to a div, and then calling the plugin function on load:

<div class="myscrollingdiv" style="overflow:scroll; height:200px;"></div>

$(function(){
   $(".myscrollingdiv").jScrollPane();
});

http://jscrollpane.kelvinluck.com/