Styling Scrollbars to Match Your UI Design

This article will guide you in improving the look and feel of scrollbars to match your UI design. Muhammad Ahmad Zafar will take a look at what WebKit browsers offer you in terms of CSS, plus he’ll use a jQuery fallback to cater for other browsers. When he refers to Webkit-based browsers he’s essentially talking about Apple Safari and Google Chrome. Together they currently hold more than 40% of the overall desktop browser market. For tablets, Apple’s iPad will always use Webkit no matter which company’s browser is used. Google also added Chrome to its Android OS.

Sometime back (several years) CSS Pseudo Elements were introduced in Webkit browsers to target scrollbars, presenting the opportunity to style your page according to your theme. Let’s style something, using the -webkit- prefix and webkit’s custom scrollbar properties. Keep in mind that Muhammad Ahmad Zafar is sticking to just the basic CSS properties for ease of understanding, with explanation in comments. When the pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS.