Customizing Scrollbar with jQuery and CSS

Scrollbars would look really cool if they get customized in the right way. It would for sure enhance the visual appearance of your site. And so in this post we would be seeing on how to customize the scrollbar using jquery and CSS. There is a method to customize it using pure CSS but the big problem with that is that it wont take effect in non webkit browsers like Firefox or Opera. And so we would be using jQuery plugins to make this task easier. This would just include a single line of jquery. So lets get started.

jQuery enscroll Plugin :

This plugin would help us in customizing the scrollbar. You can download the plugin from here.

Writing Down the Markup :

So lets just write in the HTML part now. Wrap the content that you want to be scrollable with a div of class scrollbox. Below is a sample code :

<script src = "jquery.js"></script>
<script src = "enscroll.js"></script>
<div class = "scrollbox">
   //Your Content Here
</div>

And so that is it we are done with the markup ! Simple as that !

The CSS:

And so it is time to customize the scrollbar. This of course we would be doing with CSS. Take a look at the code below :

.vertical-track {   //For the background track of the scroll bar
   //Stylings Here
}
.vertical-handle { //For the scrollbar pointer
   //Stylings Here
}

This styling holds good only for the vertical scrollbar. You can use .horizontal-track and .horizontal-handle for styling the horizontal scrollbar.

jQuery Part :

And so we are done with the markup and CSS. Lets add the jquery line now. Before that make sure that you have included the enscroll.js file and your jquery.js file. The following is the jQuery code that you would need to add.

<script type = "text/javascript">
$(document).ready(function(){
   $('.scrollbox').enscroll();
});
</script>

And so that is it for this post. Happy styling :)

Tweet