Advertisement
HTML/CSS

Quick Tip: Styling Scrollbars to Match Your UI Design

by

This tip will guide you in improving the look and feel of scrollbars to match your UI design. We'll take a look at what WebKit browsers offer us in terms of CSS, plus we'll use a jQuery fallback to cater for other browsers.


Quick Note About Browsers

When we refer to Webkit-based browsers we're 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 and Chromebooks are of course based on Google Chrome.

Looking at these figures there should be a very bright future for scrollbar styling!


Step 1: A Simple Page With Scrollbars

Before we can begin with the actual topic of styling scrollbars with CSS, we need a functional demo; a page with scrollbars. Scrollbars can be seen if:

  • Contents are larger than the visible window area (a scrollbar will appear on the right).
  • A textarea contains enough text so that scrollbars appear.
  • An iframe is used to display a different page.
  • A div or any other block element has its overflow property set.

For the sake of this demo we'll go with the last option. Here is my initial markup:

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

</div>

It's just a div with plenty of dummy content. And here is the initial CSS, which sets some fixed dimensions and triggers both horizontal and vertical scrollbars:

	.container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

You should be able to see something similar to this:


Step 2: Starting With Webkit Browsers

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 I'm sticking to just the basic CSS properties for ease of understanding, with explanation in comments.

	::-webkit-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */

When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. - Surfin' Safari

And now for some of the other pseudo-elements:

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

After adding this CSS you should be able to see the following effect (again, just Webkit browsers).

Guess what? Internet Explorer Has its Own Scrollbar Styling!

That's right - in fact IE was the first browser to ever support styling of scrollbars through CSS. This was back in the days of IE 5.5, but only the color can be changed.

These properties can still be used today; take a look at this single property on IE 9 for demonstration purposes:

  body {
      scrollbar-face-color: #b46868;
  }

See how it would look:


Step 3: Fallback for Non-Webkit Browsers

Enough about WebKit. Firefox, IE and Opera can also join in the fun. For them we have a very nice fallback approach in the form of jScrollPane. This jQuery plugin is developed by Kelvin Luck and it will be our saviour for the day.

Kelvin's website has lots of good examples, but for basic use all we need to do is download jQuery and the jScrollPane files and implement them in the following way:

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

Just for the purpose of matching our theme, let's open jquery.jscrollpane.css and edit the following lines with our color values (for performance improvements you may want to place all the styles within your own files):

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

Here is a screenshot of what you will see in Firefox:


Conclusion

Web Apps like Gmail and Google+ (along with many other examples) have already embraced the idea and if this momentum continues, perhaps Firefox and IE will also provide their own solutions.

I hope you enjoyed this Quick Tip and I look forward to seeing what you do with scrollbars in your design work!


Further Resources

Related Posts
  • Code
    Web Development
    Using Polymer to Create Web ComponentsPolymer wide retina preview
    Polymer will help you to easily create Web Components for your web apps, using a similar syntax to HTML.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Web Design
    HTML/CSS
    Create a Quick, Sticky MenuSticky menu retina
    During this quick tutorial we're going to implement a sticky menu with CSS, toggling its visibility with jQuery. It's the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.Read More…
  • Web Design
    HTML/CSS
    Create a Flexible Folded Paper Effect With CSS3Preview
    In this tutorial we'll learn to create a flexible (responsive) folded paper effect using CSS3 features like background gradients and box-shadows, which can give a cool-looking background to the content area of your website.Read More…
  • Code
    PHP
    Building Web Applications from Scratch with LaravelMain image
    In this Nettuts+ mini-series, we'll build a web application from scratch, while diving into a great new PHP framework that's rapidly picking up steam, called Laravel — a simple and elegant PHP 5.3 framework. First up, we'll learn more about Laravel, and why it's such a great choice for your next PHP-based web application.Read More…