December 9, 2013 7:57 am

How to create Facebook style scroll bar with jQuery & CSS

Facebook is one of the best designs people want to copy or want to implement in there web applications, so today I am going to give you an article on Facebook scroll style which is very nicely created and simply explained in below article.

I have used a jQuery library nicescroll and CSS to create this scroll bar.

How to create Facebook style scroll bar with jQuery & CSS

CSS used in this method:

#pageData Used to styling div box, #box2000 > div:hover used to increase scroll bar size on hand over.

jQuery external libraries required for this page:

jQuery function initialization to create scroll bar

Function niceScroll start on document ready, $(“#pageData”).niceScroll({ autohidemode: true }) used to add scroll on div with id pageData and autohidemode: true used to hide scroll on hand out from div.

HTML script to show data:

All togather

In this section we are showing you complete code to use:

If you have any issue in its configuration or want to suggest some thing please feel free to comment. For your ease we make its demo and script to download.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • Dave

    How do you remove the scroll bar on the right? FB doesn’t have that. Thanks.

  • Pawel

    Thanks for sharing!