We’re all using web browsers to navigate on the internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Although Google and Apple assigned them already some quite nice UI elements, some people thought that there is room for more.
Did you know that you can customize the way a scrollbar looks? Let’s say you’ve built a great website but you want to make it awesome. Changing the way the scrollbar looks can be one of the steps for improving a layout.
Custom Scrollbars with CSS3
Customizing scrollbars is pretty easy. There are simple pure CSS3 based solutions but there’s a glitch: custom scrollbars works only on WebKit browsers. But hey, covering more than 60% of the browsers marketplace is certainly a great achievement.
I’ve built a simple example which explains how you can change they way a scrollbar looks but before the code, here are the differences between my regular Chrome scrollbar and the one I present you:
Let’s write some code:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}
As you already noticed, each element has the custom prefix ::-webkit-. The elements I styled are the main scrollbar, scrollbar buttons, and the scrollbar thumb. For the full list of elements and states, visit Chris Coyier’s article related to custom scrollbars. What I did is just a basic example, based only on CSS background colors and some other simple CSS properties but you could actually modify scrollbars from the bottom by replacing the default images for tray or buttons with some new ones using, of course, CSS and the lovely background attribute.
As I previously mentioned, this is a basic example of how you could customize scrollbars using pure CSS3.
How to Customize Browser Scrollbars Using #CSS3 and #jQuery Click To TweetCustom Scrollbars with jQuery
On the other hand, there are jQuery alternatives to the CSS3 approach which also come with support for other browsers as well like FireFox, Internet Explorer or Opera.
I made a roundup with the best 3 jQuery plugins for custom scrollbars I could find. As for the selection criteria, I was searching for lightweight cross-browser compatible plugins built using the best coding standards.
Perfect Scrollbar
Perfect Scrollbar is a lightweight, easy to implement and customize jQuery plugin.
It also works with vanilla JavaScript and major tools like NPM or Browserify. It even comes as a Rails gem.
Gemini Scrollbar
The Gemini Scrollbar plugin is a slick solution to the boring scrollbars we`re used to. It`s simple to use and targets web application developers. So if you`re working on a new app and need some nice scrollbars, make sure to check the plugin too. The demos look great.
Simplebar
If you want to keep things simple, then Simplebar might be what you`re looking for. The plugin generates the custom scrollbar without affecting the overall performance of the app, using pure CSS for styling and weighing just 5KB. It supports browsers from IE6+. Quite impressive!
I`m sure that there are other approaches to custom scrollbars for browsers or applications and I would love to check them out so drop them in the comments below. Also, follow me on Twitter.
