Content
As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers. For this example you’ll be making a minimalist scrollbar. This type of scrollbar would work well if you are going for a simple, elegant style for your website. In the second part we’ll implement four different types of scrollbars to give you some ideas for making your own scrollbars. On the other hand, many UI designers believe that you should never interfere with “standardized” UI components like the scrollbar.
- An alternative is hiding the default scrollbar and using a library, but this may effect performance when used as main scrollbar for your page.
- Or even have multiple style on the same page…or just keep the default style (“Mac OS” scrollbar style).
- You can write your CSS in a way to support both -webkit-scrollbar and CSS Scrollbars specifications.
- Because the thumb is transparent the gradient color of the background shows through.
- However, there is presently no support for modifying the padding and roundness for the “track thumb”.
- Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
- In the second part we’ll implement four different types of scrollbars to give you some ideas for making your own scrollbars.
Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use,cookie and privacy policy. Perhaps you should first ask yourself why this is necessary.
A Cross-Browser Demo of Custom Scrollbars
Codepen.io needs to review the security of your connection before proceeding.
You can write your CSS in a way to support both -webkit-scrollbar and CSS Scrollbars specifications. In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS. In this example, we have chosen to use a thin scrollbar with a green track and purple thumb. The result is a little hard to see in the screenshot, but the track is black and the thumb is a darkish gray color.
Support
It works because the box-shadow takes up all the space of the scrollbar except for where the thumb is. Because the thumb is transparent the gradient color of the background shows through. CSS Scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. We are back to IE6 and the custom-styles for scrolling bars every customers asked for back in 2000’s… and it was a already a bad idea. Or even have multiple style on the same page…or just keep the default style (“Mac OS” scrollbar style). In this article, you were introduced to using CSS to style scrollbars and how to ensure these styles are recognized in most modern browsers.
- Perhaps you should first ask yourself why this is necessary.
- The first part of this section will be learning the various CSS properties available to use for styling.
- This tutorial will mainly focus on Webkit browsers, because they offer more options for styling, but we will briefly cover Firefox as well.
- After reading this article you will understand just about everything there is to know about customizing and styling scrollbars using CSS.
With our setup out of the way, we can jump into the fun part of the tutorial. The first part of this section will be learning the various CSS properties available to use for styling. You keep the performances/behaviours of the native scroll.
Custom scrollbars made simple, lightweight, easy to use and cross-browser.
You have 100% control of what is inside the viewport – yet that’s not enough? The confusion that can occur when altering a user’s application chrome gets filed under poor usability.
Grsmto/simplebar Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser. – Grsmto/simplebar Grsmto GitHubAs the name tells you, SimpleBar is all about making it easy to create custom scrollbars. The only real downside here is that it doesn’t support usage as the main scrollbar for your website or for table, text area, or select HTML elements. – KingSora/OverlayScrollbars KingSora GitHubOverlay Scrollbars is very similar to SimpleBar but has the added benefit of supporting the HTML body element. This means that you can use it for the main scrollbar of your website in addition to all the other features you would expect like cross-browser and mobile support.
However, these approaches run into limitations with reproducing experiences like inertia scrolling (e.g., decaying motion when scrolling via trackpads). The most important thing to note is that you have the ability to use hover and active pseudo-elements from CSS to further style your scrollbar.
