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

Author: ishadeed


Translator: front end little wise


Source: ishadeed

Have a dream, have dry goods, WeChat search [big move world] keep an eye on this washing dishes in the wee hours of the morning.

This paper making https://github.com/qq449245884/xiaozhi has included, has a complete line companies interview examination site, information, and my series of articles.

Custom scrollbars are becoming increasingly popular and well worth exploring. Why do we need custom scrolling? The browser’s default scrollbar makes the UI look inconsistent across multiple operating systems, and with definition scrolling we can unify the style.

I’ve always been interested in how to customize scrollbars in CSS, but never had the opportunity to do so. Today, I will record my own learning process.

Introduction to the

First, we need to explain the components of the scroll bar. The scroll bar contains Track and Thumb, as shown in the figure below:

Track is the basis for the scroll bar, where the thumb is the scroll that the user drags through a page or section.

Another important thing to remember is that scrollbars can work horizontally or vertically, depending on the design. In addition, this changes when working on a multilingual site that works in both left-to-right (LTR) and right-to-left (RTL) directions.

Custom scroll bar design

Having a custom scroll bar used to be the preserve of WebKit, so Firefox and IE were excluded from games. We have a new syntax, only available in Firefox, that will make our job easier when it is fully supported. Let’s take a look at the old WebKit syntax and then introduce the new syntax.

The grammar of the old

The width of the scroll bar

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

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

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

The scrollbar track

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

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

The scroll bar thumb

Once we have the basics of the scroll bar in place, we need to style the thumb of the scroll bar. This is important because the user may drag the 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’ve covered the old ways of customizing scrollbars in CSS. Let’s explore the new grammar.

New syntax

Scrollbar Width

As it says, this defines the width of the scroll bar, with two values auto and thin. The downside is that we can’t define a specific number like WebKit’s syntax does.

.section {
  scrollbar-width: thin;
}

Scrollbar Color

With this property, we can define the color of the paired values for the scroll bar track and thumb.

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

Although this new syntax is simple, it is limited. We can only add color. We can’t add shadows, gradients, rounded, or anything like that, we’re allowed to customize just the color.

Specifies the scope of the custom scroll bar

An important question to know is where to customize the scroll bar. Do you want the style to be generic and work for all scrollbars on your site? Or do you just want to use it for specific parts?

With the old syntax, we could write selectors, and instead of having to attach them to elements, they would apply 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 section, you need to append elements 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’s almost the same. What I noticed is that if you want a generic style, it should be applied to the < HTML > element, not to the .

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

I tried to add the above for , but it didn’t work as expected.

Now that we know how the old and new syntax works, let’s start customizing some scrollbar designs.

Custom scroll bar design

Case 1

Before you dive into custom scrollbars, it’s worth discussing the default styles in Mac OS. Here’s what it looks like.

• The scroll bartrackThe left and right sides of the frame, the background color is solid color.
• The scroll barthumbIt’s round, with space on both sides.

For Windows, it’s a little different.

Here’s how to customize the scroll bar based on the above simulation.

.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 doesn’t work on ::webkit-scrollbar.

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

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

Case 2

For this example, the design is a bit heavy because it includes gradients and shadows. We can mimic this effect by applying internal shadows and gradients. Let’s see how!

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

The sample address: https://codepen.io/shadeed/pe…

Example 3

We can also add borders to the thumb and track, which can help us with some tricky designs.

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

Based on the same example, we can reset the top and bottom boundaries to zero and thumb gets an interesting effect. Notice the small elements at the top and bottom of the thumb.

The sample address: https://codepen.io/shadeed/pe…

Can I add a hover effect?

We can add a hover effect to the old and new syntax’s scroll bar thumb.

/* old syntax */.section::-webkit-scrollbar-thumb:hover {background-color: # 5749D2; } /* new syntax */.section {scrollbar-color: #d4aa70 #e4e4e4; Transition: the scrollbar color - 0.3 s ease - out; } .section:hover { scrollbar-color: #5749d2; }

Display scroll bars when needed

A scrollable element can be created by adding a value other than visible to the overflow property. The AUTO keyword is recommended because it displays the scroll bar only when content exceeds its container.

.section {
    overflow-y: auto;
}

Accessibility issues

When customizing the scrollbar design, remember to have a good contrast between the thumb and track so that it is easily noticed by the user.

Consider the following “bad” example of a custom scroll bar.

The color of the thumb is barely visible. This is not good for users, because if they are used to scrolling through thumb, it will make it harder for them.

After the deployment of the code may exist bugs can not be known in real time, in order to solve these bugs afterwards, spent a lot of time to debug the log, here by the way to recommend a good BUG monitoring toolFundebug.

Original: https://ishadeed.com/article/…

communication

Article continuously updated every week, you can search the first big move world 】 【 WeChat time reading, reply [welfare] how a front-end video, waiting for you, in this paper, making https://github.com/qq449245884/xiaozhi has included, welcome Star.