1

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?

enter image description here

NaN
  • 8,596
  • 20
  • 79
  • 153

3 Answers3

2

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!

Pez Cuckow
  • 14,048
  • 16
  • 80
  • 130
  • 1
    Google Chrome supports full scrollbar styling. But for full cross browser support you indeed need JavaScript. – René Sep 06 '12 at 13:51
  • 1
    A good thing about that Content Scroller is that it supports horizontal scrolling as well as vertical. Not many plugins handle that so smoothly. The event callbacks, such as `onTotalScroll`, are also very friendly. – MalSu Sep 06 '12 at 13:55
1

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.

techfoobar
  • 65,616
  • 14
  • 114
  • 135
0

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

S..
  • 5,511
  • 2
  • 36
  • 43