The Art Of Scrollbar Styling With CSS
Published: 2023-12-28 10:45:43

by [Hannah Kalio](https://blog.openreplay.com/authors/hannah-kalio)


<blockquote><em>
In web design, meticulous attention to every element is crucial for crafting a user experience that is both visually enticing and deeply engaging. The scrollbar, an element that is commonly disregarded, can be adjusted to enhance the overall aesthetics and atmosphere of a website. By applying CSS to the scrollbar, you can transform it from its default appearance into a seamlessly integrated component that complements your website's design aesthetic, and this article will show you everything about this.
</em></blockquote>

<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>

Customizing the scrollbar offers several benefits. Above all else, it enables you to uphold uniformity and coherence across your website. By matching the scrollbar's style with the rest of your site's color scheme, typography, and overall design, you create a cohesive visual experience that feels polished and professional.

Additionally, scrollbar styling can help improve usability. By making the scrollbar more visually prominent or distinct, users can easily locate and navigate through lengthy content, making for a more enjoyable and efficient browsing experience. Custom scrollbars can also provide visual feedback, giving users a sense of their progress as they scroll through a page.

Fortunately, modern web browsers offer a range of [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) and [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) that allow you to style scrollbars. With a bit of CSS knowledge and creativity, you can transform the default scrollbar into a visually appealing and functional element that elevates your website's design.

In the following article, we will delve into the fundamental concepts of [styling CSS scrollbars](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling), encompassing the key properties you can utilize. We'll also dive into more advanced techniques, such as using [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) and [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations), to create unique and dynamic scrollbar styles. Additionally, we'll discuss some common mistakes to help you achieve the perfect scrollbar style. By the end, you'll have the tools and knowledge to customize scrollbars and enhance the overall visual experience of your website.

## Basic CSS Scrollbar Styling

In this section, we’ll explore the basics of [CSS scrollbar styling](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling) and its main properties. Here are the key properties related to scrollbars:

- [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) and [`scrollbar-track-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)

The [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) property controls the width of the scrollbar. By default, the value is `auto`, letting the browser decide the width depending on the platform or user agent. Nevertheless, you can alter this function by selecting `thin` or `auto`  to enforce a particular width.

On the other hand, the [`scrollbar-track-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color) property allows you to set the [color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) of the scrollbar's track explicitly. It is equivalent to specifying the track color value in the `scrollbar-color` property without the need to define the thumb color.

For example;
```css
/* Setting scrollbar track color explicitly */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #91d4c9; /* Track color */
}
```
    
This code sets the width of the scrollbar, which is the vertical or horizontal bar that appears on the side or bottom of a scrollable element. In this example, the width of the vertical scrollbar is set to `8px`. It also sets the scrollbar track color to `#91d4c9`.

![-](https://blog.openreplay.com/images/styling-scrollbars-with-css/images/s_391740E8E841EFCE8A1726A0CBE396E3DE09115662EE30DBDDA54F3909BE0871_1694377501465_5_.jpg)

We can see here that the `scrollbar-track-color` is set to `#91d4c9` and the width of the scrollbar is `8px`.

- [`scrollbar-thumb-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)

Similarly to the `scrollbar-track-color`, this property sets the color of the scrollbar's thumb explicitly, without the need to define the track color.
```css
/* Setting scrollbar thumb color explicitly */
::-webkit-scrollbar-thumb {
  scrollbar-thumb-color: #888; /* Thumb color */
}
```
![-](https://blog.openreplay.com/images/styling-scrollbars-with-css/images/s_391740E8E841EFCE8A1726A0CBE396E3DE09115662EE30DBDDA54F3909BE0871_1694377226648_4_.jpg)

Here, the scrollbar-thumb-color is being set to `#888`

- [`scrollbar-thumb-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)

This property determines the [radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) or curvature of the scrollbar's thumb. By default, the setting is `auto`, which renders a rectangular thumb. You can use a length value or a percentage to create rounded corners for the thumb.
```css
/* Setting scrollbar thumb radius */
::-webkit-scrollbar-thumb {
  border-radius: 4px; /* Rounded thumb */
}
```
![-](https://blog.openreplay.com/images/styling-scrollbars-with-css/images/s_391740E8E841EFCE8A1726A0CBE396E3DE09115662EE30DBDDA54F3909BE0871_1694377600230_7__.jpg)

From the example shown above, the `border-radius` property is used to add rounded corners to the `scrollbar thumb`. The `scrollbar-thumb` was given a radius of `4px` which gave the thumb a rounded appearance.

NOTE: These properties are supported by [WebKit](https://developer.mozilla.org/en-US/docs/Glossary/WebKit)-based browsers, such as Chrome and Safari. Remember that various browsers might utilize distinct prefix versions for these properties. By adjusting these attributes, you can initiate the process of customizing the scrollbar's look. Experiment with different values and combine them with other CSS properties to achieve your desired visual effect.


<CTA_Middle_Design />



## Advanced CSS scrollbar styling
Let's explore advanced CSS scrollbar styling techniques using [pseudo-elements]((https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar)) and [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations).

- [Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) to Style Scrollbar Track and Thumb

By targeting pseudo-elements like `::-webkit-scrollbar-track` and `::-webkit-scrollbar-thumb`, you gain the ability to style distinct components of the scrollbar individually.

Example:
```css
/* Adjusting the scrollbar track's style */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
/* Customizing the appearance of the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}
/* Altering the scrollbar thumb's look when hovered */
::-webkit-scrollbar-thumb:hover {
  background-color: #333;
}
```
In the above example, the scrollbar track's background adopts the color `#f5f5f5` while the scrollbar thumb features a background of `#888` and a `4px` border radius. Moreover, upon hovering over the scrollbar thumb, its background transitions to `#333`.

- Applying [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) to the Scrollbar

CSS animations offer a means to incorporate dynamic effects into the scrollbar, enhancing its visual appeal. You can apply animations to pseudo-elements like `::-webkit-scrollbar` and `::-webkit-scrollbar-thumb`.

Example:
```css
/* Defining the animation for thumb color transition */
@keyframes thumbColorTransition {
  0% {
    background-color: #888;
  }
  50% {
    background-color: #555;
  }
  100% {
    background-color: #888;
  }
}

/* Applying the defined animation to the scrollbar thumb */
::-webkit-scrollbar-thumb {
  animation: thumbColorTransition 2s infinite;
}
```
In the provided case above, a CSS animation called `thumb-color-animation` is defined. This animation smoothly alters the background color of the scrollbar thumb, oscillating between `#888` and `#555` repeatedly. The animation is then assigned to the scrollbar thumb using the `animation` property.

![-](https://blog.openreplay.com/images/styling-scrollbars-with-css/images/s_391740E8E841EFCE8A1726A0CBE396E3DE09115662EE30DBDDA54F3909BE0871_1697704835942_scrollbar+tips3.gif)

 It's important to note that `::-webkit-scrollbar` and its related pseudo-elements are specific to WebKit-based browsers such as Chrome and Safari. Alternative browsers might have their implementations or support distinct syntax variations.

## Common mistakes and how to avoid them

When working on the appearance of [CSS scrollbars](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling), developers might come across several typical errors. Here are a few of them, along with tips on how to avoid them:

- Neglecting Browser Compatibility:

We focus only on WebKit-based browsers (like Chrome and Safari) and neglect other browsers that may have different implementations or syntax for scrollbar styling. Test your scrollbar styles across different browsers and ensure graceful degradation for non-WebKit browsers. Consider using vendor prefixes and alternative techniques, such as JavaScript-based scrollbar libraries, to achieve consistent styling.

- Overcomplicating the Design:

Applying excessive visual effects or complex animations to the scrollbar may lead to a cluttered or distracting user experience. Maintain a neat and straightforward design for the scrollbar that aligns with the overall look of the website. Use animations and effects carefully, ensuring they contribute positively to the user experience rather than creating disruptions.

- Ignoring Accessibility Considerations:

Sometimes, we create scrollbar styles that compromise accessibility, such as low contrast between the scrollbar and background, insufficient size for easy interaction, or removing default scrollbar functionality. Verify that the scrollbar is usable by all users. Maintain sufficient contrast between the scrollbar and background, provide enough visible space for comfortable interaction, and avoid removing core scrollbar functionality, such as scroll arrows or track-clicking.

- Relying Solely on Custom Scrollbars:

Most times we completely replace the default scrollbars with custom styles without considering user familiarity and browser consistency. While customizing the scrollbar is an option, it's important to strike a balance between custom design and maintaining a familiar user experience. Consider using subtle enhancements to the default scrollbar instead of completely replacing it, ensuring users can still recognize and interact with it intuitively.

- Lack of Testing and User Feedback:

Most developers fail to test scrollbar styles thoroughly on different devices, screen sizes, and user scenarios. Test your scrollbar styles on various devices, screen resolutions, and browsers to ensure consistent and reliable behavior. Seek user feedback and iterate on the design based on real-world usage to improve usability and address any issues.

By avoiding these common mistakes, you can create effective and user-friendly scrollbar styles that enhance the overall browsing experience without sacrificing accessibility or compatibility.

## Conclusion

Customizing scrollbars is a great way to add a personal touch to your website and make it more user-friendly. By using custom CSS properties, you can control the appearance of your scrollbars and create a more cohesive look and feel for your website.

So, if you want to make your website more unique and user-friendly, consider customizing your scrollbars!