Lets learn Web Designing

How to customize browser default Vertical Scrollbar: jScrollPane (Step by Step)

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.

Image of Customized Scrollbar using jScrollPane

Image of Customized Scrollbar using jScrollPane

Click here to see jScrollPane demo.

How to use jScrollPane

Step 1: Make a folder on your desktop, and give it a name. Lets say- “Project”. We will keep all our files inside this folder.

Step 2: To keep the structure organized, make 2 separate folders inside Project -

  1. js to store all javascript files
  2. css to store all stylesheet files

Step 3: Download the latest jQuery file (jquery-1.3.2.js), and the jScrollPane file (jScrollPane.js). Save both the files in js folder.

Step 4: Download the css file that comes with jScrollPane (jScrollPane.css) and save it in css folder.

Step 5: Now inside the main Project folder, create a blank html file. Name it as “index.html“.

Step 6: Write the following lines of code between <head> and </head> tags of “index.html” to include the js files and css files.

<link rel="stylesheet" type="text/css" href="css/jScrollPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>

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.

<div class="container" id="section-scroll">
    <div class="content">
    </div>
</div>

Here we are creating a box named container, which contains another box named content. Give the following styles to container box and content box.

<style type="text/css">
    .container{
        width:400px;
        height:300px;
        overflow: auto;
    }
	
    .content{
        width:360px;
        height: 1000px;
        margin:10px auto;
    }
</style>

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.

 
 
 
Container-- height: 300px; width: 400px; overflow: auto;
Content-- height: 1000px; width: 350px; margin: 10px auto;

Your actual content will go inside the content box. The scroll bar will appear on container box.

Step 8: Now our code inside the <head> and </head> should look something like this.

<style type="text/css">
.container{
    width:400px;
    height:300px;
    overflow: auto;
    }
	
.content{
    width:360px;
    height: 1000px;
    margin:10px auto;
    }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" href="jScrollPane.css" />

Step 9: Now our code inside the <body> and </body> should look something like this.

<div class="container" id="section-scroll">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore.
        </p>
    </div>
</div>

Step 10: Now the last step is to apply the following script between the <head> and </head> tags to get the customized vertical scrollbar.

<script type="text/javascript">
    $(function(){
        $('#section-scroll').jScrollPane();
    }); 
</script>

Step 11: Now our code inside the <head> and </head> should look something like this.

<style type="text/css">
.container{
    width:400px;
    height:300px;
    overflow: auto;
    }
	
.content{
    width:360px;
    height: 1000px;
    margin:10px auto;
    }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" href="jScrollPane.css" />
<script type="text/javascript">
$(function(){
    $('#section-scroll').jScrollPane();
}); 
</script>

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.


Search tags:
, , , , , , , , , , , ,

About these ads

15 responses

  1. Thanks a lot! from all the solutions posted in other websites this is the most accurate and functional with WordPress too!!!

    July 21, 2010 at 3:45 am

  2. Pingback: How to customize browser default Horizontal Scrollbar: jScrollHorizontalPane (Step by Step) « Vikram Mehta's Blog

  3. emloam

    Thanks for this – I followed your instructions and got it working perfectly with my own colours etc.

    Now I just need to know how to integrate it with wordpress. I’ve been trying various ways but I’m very new to this wordpress lark, and seem to be missing something.

    Do you have a ‘how to’ on integrating this in to wordpress? many thanks, Em.

    October 13, 2010 at 12:57 pm

  4. Rafaël van Gurchom

    I don’t know what I am doing wrong, but I still get the original scrollbars.

    I am using wordpress. I have the .js and .css files each in a different folder in my theme directory. I placed the links in header.php, all correct! i guess..

    I used the exact same code as above, and placed the html code in index.php. but it still doesn’t work.

    Can anyone help please?

    September 1, 2011 at 9:13 pm

    • Rafaël van Gurchom

      nevermind my question. I already figured out a solution.

      October 1, 2011 at 7:18 pm

      • Anonymous

        can you post your solution plz i’m exactly looking for the same thing

        January 15, 2012 at 10:59 pm

  5. Anonymous

    thanks for this tutorial.

    i’ve tried it and seems to work…

    i have just a syntax question (hope you can clarify things a bit to me, im a total beginner with js jq):
    you create a container div with the id “section scroll” and this is going to nest the content.ok.
    but why in the script you write in the head the selector is the class “section-scroll”??
    would have looked more logical to have the id “section-scroll” in the selector position, since that is the id of the div.

    hope you can help
    best,

    September 15, 2011 at 9:17 pm

  6. Anonymous

    AWESOME!!!!!! its damn Perfect !!

    April 15, 2012 at 5:48 pm

  7. Rohit

    there was no good tutorial on this topic except this one! even after 2 years after this post…. thanks a lot,

    April 19, 2012 at 4:46 pm

  8. What\’s a good SEO tool for Joomla? Or in general? You have a decent rank, wondered if you ever tried SEOmoz or any kind of software? So much smoke and mirrors! Theres some decent stuff on the JED but I find a lot of other options too. Thanks for the help!

    May 6, 2013 at 11:27 am

  9. Eugenio

    The link of demo is not available… something is wrong with that page. I think maybe the idea is not working well… so that’s was canceled. I don’t know. Anyway I can’t test the scroller. I can’t open the links.

    July 31, 2013 at 9:11 pm

  10. Hello, homepage wanted to mention, I loved
    this post homepage. It was actually inspiring homepage.
    Carry on submitting!

    April 19, 2014 at 4:36 am

  11. Hi there, transport medyczny Lublin I just want to mention,
    I enjoyed this blog post transport medyczny Lublin. This
    became practical transport medyczny Lublin. Keep on writing!

    April 23, 2014 at 12:02 pm

  12. Incredible points. Solid transport medyczny Lublin arguments.
    Sustain the amazing spirit.

    This kind of info depilacja laserowa Radom is worth everyone’s attention.
    Where may I find out more?

    April 24, 2014 at 3:36 am

  13. Hello, stomatolog radom I would like to say, I
    enjoyed this post kamery radom. This became funny kamery radom.
    Carry on posting!

    May 5, 2014 at 6:54 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.