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:
body::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
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:
body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}
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
:
/* Works on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: blue orange;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
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:
body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}
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:
body::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
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:
.scrollable-container::-webkit-scrollbar {
width: 10px; /* width of the entire scrollbar */
}
.scrollable-container::-webkit-scrollbar-track {
background: lightgray; /* color of the tracking area */
}
.scrollable-container::-webkit-scrollbar-thumb {
background-color: darkgray; /* color of the scroll thumb */
border-radius: 10px; /* roundness of the scroll thumb */
border: 2px solid lightgray; /* creates padding around scroll thumb */
}
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:
@media (max-width: 768px) {
body {
overflow: hidden; /* Hides the scrollbar */
}
}
@media (max-width: 768px) {
body::-webkit-scrollbar {
width: 8px; /* Minimizes the scrollbar width */
}
}
@media (max-width: 768px) {
body::-webkit-scrollbar {
width: 12px; /* Adjusts the scrollbar width for better touch interaction */
}
body::-webkit-scrollbar-thumb {
border-radius: 10px; /* Rounds the scrollbar thumb for a smoother touch experience */
}
}
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:
@media (max-width: 768px) {
body {
overflow: hidden; /* Hides the scrollbar on smaller screens */
}
}
@media (min-width: 769px) {
body {
overflow: auto; /* Shows the scrollbar on larger screens */
}
}
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:
// Assuming you have a link with an ID "scroll-to-section" and a section with an ID "target-section"
document.getElementById('scroll-to-section').addEventListener('click', function() {
$('html, body').animate({
scrollTop: $('#target-section').offset().top
}, 1000); // Smoothly scrolls to the target section over a period of 1 second
});
/* Example CSS for styling the scrollbar during the auto-scroll */
body::-webkit-scrollbar {
width: 12px; /* Width of the scrollbar */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* Color of the scrollbar thumb */
border-radius: 10px; /* Roundness of the scrollbar thumb */
border: 2px solid orange; /* Creates padding around the scrollbar thumb */
}
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:
/* Example CSS for animating the scrollbar width on hover */
body::-webkit-scrollbar {
width: 12px; /* Initial width of the scrollbar */
transition: width 0.5s ease; /* Smooth transition for the scrollbar width */
}
body:hover::-webkit-scrollbar {
width: 15px; /* Width of the scrollbar on hover */
}
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:
body {
padding: 20px; /* This padding can cause the scrollbar to overlap the content */
box-sizing: border-box; /* This property can also contribute to the overlap */
}
Corrected CSS:
body {
padding: 20px 0; /* Adjusting padding to only apply to top and bottom */
box-sizing: content-box; /* Changing box-sizing to prevent padding from affecting the element's width */
}
### 2. Scrollbar disappearing with overflow: hidden unintentionally
When the scrollbar disappears unexpectedly, it might be due to the `overflow: hidden` property being applied to a parent element. This property can prevent the scrollbar from displaying. To fix this, ensure that the `overflow: hidden` property is not applied to elements that require a scrollbar.
**Example:**
Incorrect HTML and CSS:
```html
<div style="overflow: hidden;">
<div style="overflow: auto;"> <!-- This element needs a scrollbar but is hidden due to the parent's overflow property -->
<!-- Content that requires a scrollbar -->
</div>
</div>
Corrected HTML and CSS:
<div>
<div style="overflow: auto;"> <!-- This element now displays a scrollbar as intended -->
<!-- Content that requires a scrollbar -->
</div>
</div>
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:
/* Inconsistent use of overflow properties */
body {
overflow: auto; /* This element might not always display a scrollbar */
}
.scrollable-container {
overflow: scroll; /* This element always displays a scrollbar */
}
Corrected CSS:
/* Consistent use of overflow properties */
body {
overflow: scroll; /* This element always displays a scrollbar */
}
.scrollable-container {
overflow: scroll; /* This element always displays a scrollbar */
}
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:
/* For Chrome, Safari, and Opera */
::-webkit-scrollbar {
width: 12px; /* For vertical scrollbar */
height: 12px; /* For horizontal scrollbar */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* Track background */
}
::-webkit-scrollbar-thumb {
background: #888; /* Thumb background */
}
::-webkit-scrollbar-thumb:hover {
background: #555; /* Thumb hover background */
}
/* For Firefox */
.scrollbar-example {
scrollbar-width: thin; /* For thin scrollbar */
}
.scrollbar-example::-moz-scrollbar {
width: 12px; /* For vertical scrollbar */
height: 12px; /* For horizontal scrollbar */
}
.scrollbar-example::-moz-scrollbar-track {
background-color: #f1f1f1; /* Track background */
}
.scrollbar-example::-moz-scrollbar-thumb {
background-color: #888; /* Thumb background */
}
.scrollbar-example::-moz-scrollbar-thumb:hover {
background-color: #555; /* Thumb hover background */
}
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.
<div style="overflow: hidden;">
<div style="overflow: auto; height: 100%; width: 100%;">
<!-- Content that requires scrolling -->
</div>
</div>
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.
/* For Chrome, Safari, and Opera */
div::-webkit-scrollbar {
width: 12px; /* For vertical scrollbar */
height: 12px; /* For horizontal scrollbar */
}
/* For Firefox */
div {
scrollbar-width: thin; /* For thin scrollbar */
}
div::-moz-scrollbar {
width: 12px; /* For vertical scrollbar */
height: 12px; /* For horizontal scrollbar */
}
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.
::-webkit-scrollbar-thumb {
animation: scroll-animation 5s infinite;
}
@keyframes scroll-animation {
0% { background-color: #888; }
50% { background-color: #555; }
100% { background-color: #888; }
}
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: