Ishadeed Is written by Ishadeed

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Custom scrollbars are becoming more and more popular, so it’s worth checking them out. Why do I need custom scrolling? The browser’s default scroll bar makes the UI look inconsistent across multiple operating systems, so using the definition scroll we can unify the style.

I’ve always been interested in customizing scrollbars in CSS, but haven’t had the opportunity to do so. Today, I will record my learning process.

Introduction to the

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

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

Another important thing to remember is that scrollbars can work horizontally or vertically, depending on the design. In addition, this can change 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 scrollbar used to be the preserve of WebKit, so Firefox and IE were left out of the game. We have a new syntax, available only 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;
}
Copy the code

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

The scrollbar track

This represents the basis for scrollbars. We can style it by adding background, shadows, border-radius, and border.

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

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

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

So far, we’ve covered the old ways of customizing scrollbars in CSS. Let’s explore the new syntax.

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;
}
Copy the code

Scrollbar Color

With this property, we can define the colors of pairs of values for the scroll bars track and thumb.

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

Although this new syntax is simple, it is limited. We can only add colors. We couldn’t add shadows, gradients, rounded, or anything like that, all we were allowed to customize was color.

Specifies the range of custom scrollbars

An important question to know is where to customize the scroll bar. Do you want the styles to be universal and to work with all the scrollbars on your site? Or do you only want it to be used for a specific part?

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); }Copy the code

If you want to apply only to a particular section, 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);
}
Copy the code

For the new syntax, it’s almost the same. What I have noticed is that if you want a generic style, it should be applied to < HTML > elements, not .

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

I tried adding 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 exploring custom scrollbars, it’s worth discussing the default styles in Mac OS. Here’s what it looks like.

  • The scroll bartrackThere are borders on the left and right of the. The background color is solid.
  • The scroll barthumbIt’s circular, with space on the left and right.

For Windows, it’s a little different.

Here’s how we customize the scroll bar based on the simulation 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;
}
Copy the code

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

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

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

Case 2

For this example, the design is a bit heavy because it contains gradients and shadows. We can use interior shadows and gradients to mimic this effect. 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; }Copy the code

IO/Shadeed /pen…

Example 3

We can also add borders to 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); }Copy the code

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

IO/Shadeed /pen…

Can I add a hover effect?

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

/* 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; }Copy the code

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 shows the scrollbar only when the content exceeds its container.

.section {
    overflow-y: auto;
}
Copy the code

Accessibility issues

When customizing the scrollbar design, remember to have a good contrast between 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 the user, as it will increase their difficulty if they are used to scrolling through thumb.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: ishadeed.com/article/cus…

communication

This article is updated weekly, you can search wechat ** [big move the world] the first time to read, reply [welfare] ** there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.