How to create a custom scrollbar using CSS?
The Scrollbars are used to scroll through the contents of the webpage which are larger than the available display area. The scrollbar is used to provide horizontal and vertical scrolling. In this tutorial, we will be learning to customize the scrollbar.
CSS properties for custom scrollbar
To customize the scrollbar in chrome, safari, Edge, and Opera use the non-standard ::webkit-scrollbar pseudo-element.
- For customizing the buttons on the scrollbar use
::webkit-scrollbar-button.
- Customize the dragging handle with
::webkit-scrollbar-thumb.
- Use
::webkit-scrollbar-track to customize the progress bar of the scrollbar.
- Use
::webkit-scrollbar-track-piece customize the bar which has been not covered by the handle.
Example: Customize the custom scrollbar
In this program, we have added a custom scrollbar using ::webkit-scrollbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
/* width of the scrollbar*/
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
background: #CCCCCC;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: green;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #CCCCCC;
}
</style>
</head>
<body>
<div class="container">
<h1>Custom Scrollbar</h1>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
<h2> Scroll Here </h2>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Create a custom scrollbar
This is another example, where we are styling the scroll bar on the web page.
Conclusion
We can customize the scrollbar using non-standard pseudo-element ::webkit-scrollbar. But custom scrollbar is not supported in Firefox. We have explained the pseudo-element in the article that is used to customize the scrollbar.
