Posts tagged “vertical scrollbar customization”

What is jScrollPane?

jScrollPane is a jQuery Plugin that gives you the liberty to replace the browsers default “Vertical Scrollbars” with your own customized ones. This means that if you dont want the browsers default vertical scrollbars to appear on a webpage, then you can create your own customized scrollbars, and use it in place of browsers default vertical scrollbars with the help of this plugin.

With the use of this jQuery Plugin, you can easily control the apperance of the custom scrollbars using simple CSS.

Step 7: Now we need a vertical scrollbar (which can then be replaced with a customized Vertical Scrollbar). To create a vertical scrollbar, write the following code between <body> and </body> tags of index.html.

By assigning these styles, you will find that the vertical scrollbar appears on the page.

What are we doing here ?

First, we created 2 boxes. we named them “container” and “content“.
“Content” box goes inside the “Container” box. This we have already seen and understood.

Now lets see what we are doing in the styling part. We are giving a fixed height (300px) and width (400px) to the container box. Just remember one thing that the scroll bar will appear on the container box.

To the content box we are giving a width (350px) which is less than the container box. We are doing this to avoid the appearence of horizontal scroll bar on the container box. Instead we are giving a height (1000px) to the content box, because we want the vertical scroll bar to appear on container box.

After all this is done, just assign a property “overflow: auto” to the container box, which will make the vertical scrollbar appear on your web page. Please see the figure below for clear understanding.

Step 12: That’s it. We are done. Just save your html file, and see your customized vertical scrollbar in action. Now you can edit the jScrollPane.css file to customize it as per your requirement. Click here to see the demo of jScrollpane. For a complete list of options and detailed description, please visit the jScrollPane homepage.