How to customize browser default Horizontal Scrollbar: jScrollHorizontalPane (Step by Step)
What is jScrollHorizontalPane?
In a recent project I was working on, I had to customize a browser default horizontal scrollbar as per the project requirements. I was already aware of a jquery plugin “jScrollPane” using which we can customize a scrollbar. I have already posted an article on how to use jScrollPane — “How to customize browser default Vertical Scrollbar: jScrollPane (Step by Step)“.But the limitation of this plugin is that it can customize only Vertical Scrollbars, not the Horizontal ones.
So I started searching for a jquery plugin which can customize a horizontal scrollbar. After spending some time in browsing the internet, I got hold of a great plugin “jScrollHorizontalPane” using which you can style your browser default horizontal scrollbar as per your requirement. With the use of this jQuery Plugin, you can easily control the apperance of the custom scrollbars using simple CSS.
jScrollHorizontalPane Demo Picture
Click here to see jScrollHorizontalPane demo.
How to use jScrollHorizontalPane?
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 –
- js to store all javascript files
- css to store all stylesheet files
Step 3: Download the latest jQuery file (jquery-1.3.2.js), and the jScrollHorizontalPane file (jScrollHorizontalPane.js). Save both the files in js folder.
Step 4: Download the css file that comes with jScrollHorizontalPane (jScrollHorizontalPane.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“. Now you should have a structure similar to this.
File Structure
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/styles.css" /> <link rel="stylesheet" type="text/css" href="css/jScrollHorizontalPane.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jScrollHorizontalPane.js"></script>
Step 7: Now we need a horizontal scrollbar (which can then be replaced with a customized Horizontal Scrollbar). To create a horizontal scrollbar, write the following code between <body> and </body> tags of index.html.
<div class="scroll-pane" id="container"">
<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. You can define these styles in a separate stylesheet styles.css or include them inside <style type=”text/css> and </style> tags like this. Keep the following code between the <head> and </head> tags.
<style type="text/css">
#container{
width: 562px;
height: 393px;
margin:0 auto;
overflow:auto;
}
.content{
width: 1235px;
height: 366px;
}
</style>
By assigning these styles, you will find that the horizontal 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 (393px) and width (562px) 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 height (366px) which is less than the container box. We are doing this to avoid the appearence of vertical scroll bar on the container box. Instead we are giving a width of (1235px) 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.
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: 562px;
height: 393px;
margin:0 auto;
overflow:auto;
}
.content{
width: 1235px;
height: 366px;
}
.content-data{
width: 100px;
height: 80px;
border: 1px solid #00CC33;
float: left;
margin: 5px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jScrollHorizontalPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.js"></script>
Step 9: Now our code inside the <body> and </body> should look something like this.
<div class="scroll-pane" id="container"><!--BEGIN SCROLLPANE (CONTAINER) DIV-->
<div class="content"><!--BEGIN INNER (CONTENT) DIV-->
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
<div class="content-data"> </div>
</div><!--END INNER (CONTENT) DIV-->
</div><!--END SCROLLPANE (CONTAINER) DIV-->
Step 10: Now the last step is to apply the following script between the <head> and </head> tags to get the customized horizontal scrollbar.
<script type="text/javascript">
$(document).ready(function(){
$('.scroll-pane').jScrollHorizontalPane();
});
</script>
Step 11: Now our code inside the <head> and </head> should look something like this.
<style type="text/css">
#container{
width: 562px;
height: 393px;
margin:0 auto;
overflow:auto;
}
.content{
width: 1235px;
height: 366px;
}
.content-data{
width: 100px;
height: 80px;
border: 1px solid #00CC33;
float: left;
margin: 5px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jScrollHorizontalPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.scroll-pane').jScrollHorizontalPane();
});
</script>
Step 12: That’s it. We are done. Just save your html file, and see your customized horizontal scrollbar come alive. Now you can edit the jScrollHorizontalPane.css file to customize it as per your requirement. Click here to see the demo of jScrollHorizontalPane. For a complete list of options and detailed description, please visit the jScrollHorizontalPane homepage.
Please visit the following links for jScrollHorizontalPane related content:
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
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 –
- js to store all javascript files
- 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.
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.
Vikram Mehta's Blog 