Home
| Change scrollbar colors |
OverviewDescriptionIn September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.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. In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers. Demonstration InstallationStyling Scrollbars in Chrome, Edge, and SafariCurrently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element
Here is an example that uses
You need to reply to the topic in order to see the code resources This code works in the latest releases of Chrome, Edge, and Safari. Unfortunately, this spec has been formally abandoned by W3C and will likely be deprecated over time. Styling Scrollbars in FirefoxCurrently, styling scrollbars for Firefox is available with the new CSS Scrollbars.Here is an example that uses
You need to reply to the topic in order to see the code resources This specification shares some commonality with the
Building Future-Proof Scrollbar StylesYou can write your CSS in a way to support both
Here is an example that uses
You need to reply to the topic in order to see the code resources Blink and WebKit browsers will ignore rules they do not recognize and apply
ConclusionIn this article, you were introduced to using CSS to style scrollbars and how to ensure these styles are recognized in most modern browsers.It is also possible to simulate a scrollbar by hiding the default scrollbar and using JavaScript to detect height and scroll position. However, these approaches run into limitations with reproducing experiences like inertia scrolling (e.g., decaying motion when scrolling via trackpads). Notes
|
| This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI. |
Last edited by Mathias on Mon Jun 11, 2012 3:09 pm; edited 1 time in total
