Scrollable elements of web-pages have become popular since the early development of the web. Using textarea and iframe tags this can be done easily however with the new HTML5 and CSS3 capabilities it can now be done using the div tag.
Looking back in the day where IE 5.5, the Internet Explorer team introduced a set of non-standard CSS properties that allows users to customize scrollbars using the scrollbar-base-color from which you can use to make elements scroll.
That’s being said, it is now much easier to do it using HTML5 and CSS3. Webkit now supports styling of the scrollbars in overflow sections, drop-down, menus and text areas.
In today’s tutorial, I am going to show you how to customize your scrollbars using CSS3 and jQuery.
Resources required to complete this tutorial
- Basic Knowledge of CSS3
- Enscroll jQuery plugin
- Time and Patience
CSS Version
The Markup
To start our demo for the CSS version of our customize scrollbar let’s put a basic markup and wrap them with a class scrollbar and an id of css_version. Let’s also wrap our content in a class content.
<div class="scrollbar" id="css_version"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div> </div>
The CSS
Webkit has introduced these pseudo elements to customize the scrollbars.
::-webkit-scrollbar ::-webkit-scrollbar-button ::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-thumb ::-webkit-scrollbar-corner ::-webkit-resizer
To apply this on our CSS let’s use the following code. First we will style our scrollbar give it a width and height and then let’s use the following pseudo elements of webkit to customize the look of our scrollbar.
.scrollbar{
width:530px;
height:300px;
background-color:#fff;
margin:50px 0 0 40px;
overflow-y:scroll;
float:left;
padding: 10px;
border: 1px solid #c5c5c5;
}
.content{
height:450px;
}
#css_version::-webkit-scrollbar {
width: 11px;
}
#css_version::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 11px;
border-radius: 11px;
}
#css_version::-webkit-scrollbar-thumb {
-webkit-border-radius: 11px;
border-radius: 11px;
background: rgba(28,114,150,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#css_version::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Note: These pseudo elements will work on browsers that support webkit such as Google Chrome, Safari and Opera.
jQuery Version
The problem in customizing scrollbars with HTML5 and CSS3 is that there is no standard way to accomplish this to all designs or browsers. That is why we need to use JavaScript as a solution. To customize the scrollbars using jQuery we will use the enscroll jQuery plugin by Jason Stoudt. Let’s see how we can apply this cool plugin.
The Markup
First we need to wrap out our content with the class scrollbox and then wrap out our content in a class content.
<div class="scrollbox"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div> </div>
The CSS
Now for our CSS, let’s style our class scrollbox and use default class vertical-track and vertical-handle to style our scrollbar.
.scrollbox {
width: 530px;
height: 300px;
background-color: #fff;
overflow: auto;
padding: 10px;
border: 1px solid #c5c5c5;
}
.vertical-track {
width: 11px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.vertical-handle {
width: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
background: rgba(28,114,150,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Finally to make everything work, let’s now add our jQuery code for our Enscroll jQuery plugin. Add the following code before the closing body tag.
$(document).ready(function() {
$('.scrollbox').enscroll();
});
Wrapping Up
There you have it! That’s how easy it is to customize your scrollbars using CSS3 and jQuery. There are also some other good jQuery plugins that you can use aside from enscroll jQuery plugin.
