Home » CSS » CSS Scrollbar Example

About Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

CSS Scrollbar Example

In this example, we will learn how to create and customize scrollbars.

Scrollbars are elements of a webpage, most of the times untouched, with their default settings as their main function is to scroll the content up/down or left/right, else known as vertical scrollbar and horizontal scrollbar.

When considering a normal webpage, when content extends beyond the end of the visible browser area, a scrollbar appears on your right side letting you know that there is more to see below.

Browsers that we already use have different compatibility issues with scrollbars (the customized ones), because some browsers are webkit based and others not. This leads to different properties being used to style it.

1. Basic Document Setup

Go ahead and create a new html document and add the basic sytnax in it like so:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Scrollbar Example</title>
</head>
<body>

<!-- STYLE SECTION -->

<style type="text/css">

</style>

<!-- HTML SECTION -->

</body>
</html>

Create the Scrollbar

Creating a scrollbar is pretty easy. First, add two elements in HTML, a scrollbar wrapper (div) and a content wrapper (div):

<!-- HTML SECTION  -->
<div class="scrollbar">
    <div class="content">Lorem ipsum dolor sit amet</div>
</div>

In the style section, we’ll refer to the scrollbar class to give scrollbar attributes and then to content to set content size.

<!-- STYLE  SECTION -->
<style type="text/css">
.scrollbar{
  width: 300px;
  height: 200px;
  background-color:lightgray;
  margin-top:40px;
  margin-left:40px;
  overflow: scroll; /*if the content extends beyond width and height use the scrollbar*/
  float:left;
}
.content{
  height:450px;
  width: 500px;
} 
</style>

Simple as that, we have create a scrollable div inside a page that looks like this for now:

A Basic Scrollbar

A Basic Scrollbar

3. Style the Scrollbar

The process of styling includes styling the background track, setting the size border and color, and then the main scrollbar.

<!-- STYLE  SECTION -->
<style type="text/css">
/* Set the scrollbar width */
::-webkit-scrollbar {
    width: 16px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #6be1a0;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255,0,0,0.4); 
}
</style>

Now we’d have a fully customized scrollbar, which would look like this in the browser:

A Customized Scrollbar

A Customized Scrollbar

4. Using Pseudo-Classes with Scrollbars

There are a number of pseudo-classes designed to work with scrollbars and give you much more accessibility when styling.

:horizontal – applies to any scrollbar pieces that have a horizontal orientation.

:vertical – applies to any scrollbar pieces that have a vertical orientation.

:decrement – applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

:increment – applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

:start – applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

:end – applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

:double-button – applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

:single-button – applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

:no-button – applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

:corner-present – applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

:window-inactive – applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

Below, I’ve shown an example of some of the pseudo-classes being used to modify specific aspects of the scrollbar:

::-webkit-scrollbar:horizontal {
  background-color: lightgray;
}
::-webkit-scrollbar:vertical {
  background-color: #b6eff8;
}
::-webkit-scrollbar:hover {
  background-color: lightblue;
}

The few pseudo-classes used here would result in this view:

Using Pseudo Classes to Style the Scrollbar

Using Pseudo Classes to Style the Scrollbar

5. Conclusion

To conclude, we can say that scrollbars are important elements necessary to scroll pages to content that lies out of the first stacked view of the webpage. In general, unless you want to have your very own personal page, scrollbars are not styled but just left to their own default style. However, when several sections of your page have these divs you want to limit in size but not in content, you can use and customize a scrollbar for all of your needs inside the page. The process is fairly easy and just takes time to try all the various options.

6. Download

Download
You can download the full source code of this example here: CSS Scrollbar

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments