Learn to use CSS to customize the scroll bar, which can make your products more user-experienced!

Author: ishadeed
Translator: Frontend Xiaozhi
Source: ishadeed

There are dreams and dry goods. WeChat search [Moving to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Custom scroll bars are becoming more and more popular now, and it is worth studying. Why do you need custom scrolling? The browser's default scroll bar makes the UI look inconsistent in multiple operating systems, and we can unify the style by using defined scrolling.

I have always been interested in how to customize scroll bars in CSS, but have never had the opportunity to do so. Today, I will record my learning process.

Introduction

First, we need to introduce the components of the scroll bar. The scroll bar contains track and thumb , as shown in the figure below:

track is the basis of the scroll bar, of which thumb is the scroll within the page or chapter that the user drags.

There is another important thing to remember , the scroll bar can work horizontally or vertically, depending on the design. In addition, this also changes when working on a multilingual website, which works in both left-to-right (LTR) and right-to-left (RTL) directions.

Custom scroll bar design

Having a custom scroll bar was once a webkit patent, so Firefox and IE were excluded from the game. We have a new syntax that is only used in Firefox, and when it is fully supported, it will make our work easier. Let's take a look at the old Webkit syntax first, and then introduce the new syntax.

Old grammar

scroll bar

First, we need to define the size of the scroll bar. width of the vertical scroll bar height of the horizontal scroll bar.

.section::-webkit-scrollbar {
    width: 10px;
}

With this setting, we can set the style of the scroll bar itself.

scroll bar track

This represents the basis of the scroll bar. We can shape it background , shadows , border-radius and border

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

scroll bar thumb

After preparing the basis of the scroll bar, we need to design the style thumb This is important because the user may drag this thumb to interact with the scroll bar.

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

So far, we have introduced the old method of customizing scroll bars in CSS. Let's explore the new syntax.

New grammar

Scrollbar Width

As it says, this defines the width of the scroll bar. There are two values auto and thin . The downside is that we can't define a specific number like the syntax of webkit.

.section {
  scrollbar-width: thin;
}

Scrollbar Color

With this attribute, we can define the color of the paired values track and thumb

.section {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

Although this new syntax is simple, it has limitations. We can only add color. We can't add shadows , gradients , rounded , or anything similar, we are only allowed to customize the color.

Specify the range of the custom scroll bar

An important question to know is where to customize the scroll bar. Do you want the style to be universal and effective for all scroll bars on the website? Or do you just want it to be used for a specific part?

Using the old syntax, we can write selectors without having to attach them to elements, they will be applied to all scrollable elements.

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: darkgrey;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

If you want to apply only to a specific part, you need to append the element before the selector.

.section::-webkit-scrollbar {
    width: 10px;
}

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

For the new syntax, it is almost the same. What I noticed is that if you want a generic style, it should be applied to the <html> element, not <body> .

html {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

I tried <body> , but it did not work as expected.

Now that we know the working principle of the old and new grammar, we start to customize some scroll bar designs.

Custom scroll bar design

Example 1

Before looking into custom scroll bars, it is worth discussing the default styles in Mac OS. Here is how it looks.

• There are borders on the left and right sides of the scroll bar track
• The scroll bar thumb is circular, with space on the left and right sides.

For Windows, it is a bit different.

Here is how we customize the scroll bar based on the simulation diagram above.

.section::-webkit-scrollbar {
    width: 16px;
}
 
.section::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
}
 
.section::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
    border-radius: 100px;
}

Adding border-radius for track and thumb is necessary because it does not work ::webkit-scrollbar

In the new syntax, we cannot adjust the width of the scroll bar, the only thing we can do is to change the background color of track and thumb

.section {
    scrollbar-color: #D4AA70 #e4e4e4;
}

Example 2

For this example, the design is a bit heavy because it contains gradients and shadows. We can imitate this effect by applying inner shadows and gradients. Come see how to do it!

.section::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    border-radius: 100px;
}

Example address: https://codepen.io/shadeed/pen/VwpOReG

Example 3

We can also thumb and track , which can help us deal with some tricky designs.

.section::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #8070D4;
    border: 6px solid rgba(0,0,0,0.2);
}

Based on the same example, we can reset the top and bottom borders to zero, so that thumb has an interesting effect. Note the small elements on the top and bottom of thumb

Example address: https://codepen.io/shadeed/pen/qBrGvOx

Can hover effects be added?

We can add a hover effect to thumb of the old and new syntax.

/* 旧语法 */
.section::-webkit-scrollbar-thumb:hover {
    background-color: #5749d2;
}

/* 新语法 */
.section {
    scrollbar-color: #d4aa70 #e4e4e4;
    transition: scrollbar-color 0.3s ease-out;
}

.section:hover {
    scrollbar-color: #5749d2;
}

Show scroll bar when needed

Create a scrollable element by adding a value other visible overflow It is recommended to use the auto keyword, because it only displays the scroll bar when the content exceeds its container.

.section {
    overflow-y: auto;
}

Accessibility issues

When customizing the scroll bar design, please remember to thumb and track , so that it can be easily noticed by users.

Consider the following "bad" example of a custom scroll bar.

thumb is almost invisible. This is not a good thing for users, because if they are used to thumb , it will increase their difficulty.

---

possible bugs after code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://ishadeed.com/article/custom-scrollbars-css/

communicate with

The article is continuously updated every week. You can search for [The Great Move to the World] Read it for the first time and reply to [Benefits] are multiple front-end videos waiting for you, this article GitHub https://github.com/qq449245884/xiaozhi has been included, welcome to Star.