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:
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:
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:
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
You can download the full source code of this example here: CSS Scrollbar
