How do we make a styled scroll bar for a wit

问题:

I need to create an area of the page that has it's own scroll bar, just like the Facebook messenger in the image below.

Stack overflow has the same system at the answers with large pieces of code, but that scroll bar is not styled.

Note at the picture and you will see the normal scroll bar and the styled scroll bar in the Messenger DIV. Anyone knows how to do it?

回答1:

I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!

Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)

Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller

Along with a how to use it section!

回答2:

This should help: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Another one here: http://dotroe.com/subpage.html

Those are jquery plugins that you can use on your pages.

回答3:

Use j scroll pane. It's great, very customisable, lots of demos here: http://jscrollpane.kelvinluck.com/#examples