How to Customize Scrollbars with CSS: Styling Guide with Examples

Introduction

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.

Prerequisites

To follow along with this article, you will need:

• Familiarity with the concepts of vendor prefixes, pseudo-elements, and graceful degradation.

Styling Scrollbars in Chrome, Edge, and Safari

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.

Styling Scrollbars in Firefox

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”.

Building Future-Proof Scrollbar Styles

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.

Practical Use Cases

1. Match scrollbars to site branding/colors

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 */ 
}

2. Create minimal or flat scrollbar styles

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 */
}

3. Scrollable containers (divs, cards, image galleries)

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 */
}

4. Scrollbars in mobile view: when to hide, minimize, or make touch-friendly

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:

Hiding Scrollbars on Mobile Devices

@media (max-width: 768px) {
  body {
    overflow: hidden; /* Hides the scrollbar */
  }
}

Minimizing Scrollbars on Mobile Devices

@media (max-width: 768px) {
  body::-webkit-scrollbar {
    width: 8px; /* Minimizes the scrollbar width */
  }
}

Making Scrollbars Touch-Friendly on Mobile Devices

@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.

How to conditionally hide/show scrollbars

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.

Using CSS scrollbars with JavaScript interactions (e.g., auto scroll)

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 */
}

Scrollbar animations or transitions

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.

Common Errors and Debugging

1. Scrollbars overlapping content due to incorrect padding or box-sizing

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>

3. Using overflow: auto vs overflow: scroll inconsistently

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 */
}

FAQs

1. How do I customize the scrollbar in 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:

/* 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 */
}

2. Why is my custom scrollbar not working in Firefox?

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.

3. Can I change scrollbar color using CSS?

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.

4. How to hide the scrollbar but still scroll?

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>

5. How do I style the scrollbar only inside a 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 */
}

6. Is it possible to animate a scrollbar with CSS?

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; }
}

7. Does custom scrollbar styling work on mobile?

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.

Conclusion

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:

• Customize the Browser’s Scrollbar with CSS: Dive deeper into scrollbar customization and learn how to apply these styles to specific elements on your webpage.
• CSS Pure CSS Parallax: Explore the art of creating parallax effects using only CSS, adding depth and visual interest to your website.
• How to Build an Infinite Scroll Image Gallery with React, CSS Grid, and Unsplash: Learn how to combine React, CSS Grid, and the Unsplash API to create a dynamic and visually appealing image gallery with infinite scrolling capabilities.

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.