Logo

Scrollbar Preview

A simple web app which helps developers to design and implement custom scrollbars.

Scrollbar Preview

CSS Scrollbar Selectors

Scrollbars are an essential component of any website that contains lengthy content. They provide users with a way to navigate through the content with ease. While browsers come with default scrollbar styles, they may not always match the design of your website. This is where CSS scrollbar selectors come in.

There are multiple CSS pseudo-elements that allows us to customize elements scrollbar on WebKit and Blink based browsers.

Here's a quick reminder of the available pseudo-elements:

  • ::-webkit-scrollbar -- the entire scrollbar.
  • ::-webkit-scrollbar-thumb -- the draggable scrolling handle.
  • ::-webkit-scrollbar-track -- the track (progress bar) of the scrollbar
  • ::-webkit-scrollbar-corner -- the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.

You can add these pseudo-elements to any element that has content which is longer than the space reserved for the element.

Note: Elements overflow property must be set to scroll. Othervice no scrollbar is displayed.

It's worth noting that the selectors mentioned above only work in Blink and WebKit based browsers like Google Chrome and Safari. For other browsers, you can use the scrollbar selectors provided by the W3C, such as scrollbar-width, scrollbar-color, scrollbar-track-color, scrollbar-thumb-color, and scrollbar-face-color.

Supported browsers include:

  • Chrome
  • Brave
  • Edge
  • Safari
  • Vivaldi
  • Opera

In conclusion, CSS scrollbar selectors provide web developers with a way to customize the appearance of scrollbars and make them match the design of their websites. By using these selectors, you can create a more cohesive and aesthetically pleasing user experience for your visitors.

Inspired by scrollbar.app

Setting
BackgroundBorder
BackgroundBorder
CSS Code
body {
        --sb-track-color: #0070ef;
        --sb-track-border-radius: 25px;
        --sb-track-border-color: #000;
        --sb-track-border-width: 0px;
        --sb-thumb-border-color: #000;
        --sb-thumb-border-width: 0px;
        --sb-thumb-border-radius: 25px;
        --sb-thumb-color: #9455d4;
        --sb-width: 25px;
    }
    
body::-webkit-scrollbar {
    width: var(--sb-width);
}
body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border: var(--sb-track-border-width) solid var(--sb-track-border-color);
    border-radius: var(--sb-track-border-radius);
}
body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border: var(--sb-thumb-border-width) solid var(--sb-thumb-border-color);
    border-radius: var(--sb-thumb-border-radius);
}