In 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.
To follow along with this article, you will need:
Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar
.
Here is an example that uses ::-webkit-scrollbar
, ::-webkit-scrollbar-track
, and ::webkit-scrollbar-thumb
pseudo-elements:
Here is a screenshot of the scrollbar that is produced with these CSS rules:
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.
Currently, styling scrollbars for Firefox is available with the new CSS Scrollbars.
Here is an example that uses scrollbar-width
and scrollbar-color
properties:
Here is a screenshot of the scrollbar that is produced with these CSS rules:
This specification shares some commonality with the -webkit-scrollbar
specification for controlling the color of the scrollbar. However, there is presently no support for modifying the padding and roundness for the “track thumb”.
You can write your CSS in a way to support both -webkit-scrollbar
and CSS Scrollbars
specifications.
Here is an example that uses scrollbar-width
, scrollbar-color
, ::-webkit-scrollbar
, ::-webkit-scrollbar-track
, ::webkit-scrollbar-thumb
:
Blink and WebKit browsers will ignore rules they do not recognize and apply -webkit-scrollbar
rules. Firefox browsers will ignore rules they do not recognize and apply CSS Scrollbars
rules. Once Blink and WebKit browsers fully deprecate the -webkit-scrollbar
specification, they will gracefully fall back to the new CSS Scrollbars
specification.
Customizing scrollbars to match your website’s branding and color scheme can enhance the overall user experience and create a cohesive visual identity. This is particularly important for websites that aim to establish a strong brand presence. By styling scrollbars to match your site’s colors, you can create a seamless visual flow and make your website more engaging.
Example:
Minimal or flat scrollbar styles are ideal for websites that aim for a clean and modern aesthetic. By simplifying the scrollbar design, you can reduce visual clutter and make your content more prominent. This approach is particularly suitable for websites that prioritize readability and ease of use.
Example:
Scrollable containers, such as divs, cards, and image galleries, are common elements in modern web design. Styling the scrollbars within these containers can greatly enhance their usability and visual appeal. For example, you can customize the scrollbar width, color, and style to match the container’s design, making it easier for users to navigate and engage with the content.
Example:
When designing for mobile devices, it’s essential to consider the scrollbar’s role in the user experience. Depending on the content and layout, you may want to hide, minimize, or make scrollbars more touch-friendly. For instance, hiding scrollbars can be beneficial for simple, short pages, while minimizing them can be suitable for longer pages where scrolling is necessary. Making scrollbars touch-friendly, on the other hand, can improve the overall usability of your website on mobile devices.
To implement these strategies, you can use CSS media queries to target mobile devices and apply specific scrollbar styles. Here are some examples:
By applying these styles, you can tailor the scrollbar experience to the specific needs of your mobile users, enhancing their overall interaction with your website.
Conditionally hiding or showing scrollbars can be achieved using CSS media queries or JavaScript. For example, you might want to hide scrollbars on smaller screens where content fits within the viewport, but show them on larger screens where content overflows. Here’s an example using CSS media queries:
Alternatively, you can use JavaScript to dynamically hide or show scrollbars based on specific conditions, such as the height of the content or the user’s interactions.
Combining CSS scrollbar styling with JavaScript interactions can enhance the user experience. For instance, you might want to implement an auto-scroll feature that smoothly scrolls to a specific section of the page when a user clicks a link. Here’s an example using JavaScript and CSS:
Adding animations or transitions to scrollbars can make the user experience more engaging and interactive. For example, you might want to animate the scrollbar’s width or color when the user hovers over it. Here’s an example using CSS transitions:
These examples demonstrate how you can combine CSS scrollbar styling with JavaScript interactions and animations to create a more dynamic and engaging user experience.
When the scrollbar overlaps the content, it can be due to incorrect padding or box-sizing. This issue can be resolved by adjusting the padding or box-sizing properties to ensure the scrollbar has enough space to display without overlapping the content.
Example:
Incorrect CSS:
Corrected CSS:
Corrected HTML and CSS:
Inconsistent use of overflow: auto
and overflow: scroll
can lead to unexpected scrollbar behavior. overflow: auto
displays a scrollbar only when necessary, while overflow: scroll
always displays a scrollbar. Ensure consistent use of these properties across similar elements to maintain a consistent user experience.
Example:
Incorrect CSS:
Corrected CSS:
To customize the scrollbar in CSS, you can use the ::-webkit-scrollbar
pseudo-element for Chrome, Safari, and Opera browsers. For Firefox, you can use the scrollbar-width
property. Here’s an example for customizing the scrollbar width and color:
Custom scrollbar styling using ::-webkit-scrollbar
does not work in Firefox because Firefox uses a different pseudo-element for scrollbar styling, which is ::-moz-scrollbar
. Ensure you use the correct pseudo-element for the target browser.
Yes, you can change the scrollbar color using CSS. For Chrome, Safari, and Opera, use ::-webkit-scrollbar-thumb
to change the thumb color, and for Firefox, use ::-moz-scrollbar-thumb
.
To hide the scrollbar but still allow scrolling, use overflow: hidden
on the container and overflow: auto
on the content. This will allow the content to be scrolled without displaying a scrollbar.
To style the scrollbar only inside a div, use the ::-webkit-scrollbar
pseudo-element on the div itself. For Firefox, use the scrollbar-width
property on the div.
Yes, it is possible to animate a scrollbar with CSS using keyframe animations. However, this approach is limited to WebKit browsers and does not work in Firefox.
Custom scrollbar styling using CSS does not work on most mobile browsers, including Safari on iOS and Chrome on Android. Mobile browsers often have their own scrollbar styles that cannot be overridden using CSS.
In this article, you were introduced to using CSS to style scrollbars and how to ensure these styles are recognized in most modern browsers. By leveraging pseudo-elements and vendor prefixes, you can customize the appearance of scrollbars to match your website’s branding and aesthetic. Additionally, you learned about the limitations of simulating a scrollbar using JavaScript, particularly when it comes to replicating native scrolling experiences like inertia scrolling.
To further expand your CSS skills and explore more advanced techniques, consider checking out the following tutorials:
Remember to visit our CSS topic page for a wide range of exercises, tutorials, and projects to help you master CSS and take your web development skills to the next level.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Thanks, helped me a lot!
I find CSS scrollbars are useless and ugly. This is a stupid ideal that Apple created for MAC OS X Lion. What wrong with the classic scrollbars.
Hi William,
For a specific part of the screen like sidebars, I have turned it into a class, so I just have to put it in elements that overflow: