This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021.

Hello everyone, I am zhang Three years old 🤣, a French front-end ⚖️. Love share 🖋️, love ice ice 🧊🧊. Welcome friends to add my wechat: Maomaoibingbing, pull you into the group, discuss together, look forward to growing with you 🥂.

preface

The scrollbar style in the browser is no stranger to everyone, and its style is not good. Perhaps many friends do not know that the style of this east can also be modified (only support some modern browsers), this time to take you to modify its style with CSS.

First, understand the scroll bar

First of all, let’s have a brief look at which parts the scroll bar is composed of:

When there are horizontal and vertical scrollbars, there is also an intersection (see figure below), but since landscape scrollbars are usually not used in web development (for aesthetic reasons), this small square is not used very often. The following figure shows the intersection of vertical scroll bar and horizontal scroll bar:

Second, solutions

2.1 CSS pseudo-classes

At present, we can use CSS pseudo classes to modify the scrollbar style. The following are the CSS pseudo classes used to modify the scrollbar style:

  • ::- webkit-scrollBar – Full scrollbar
  • ::-webkit-scrollbar-button — Button on the scrollbar (up and down arrows)
  • ::-webkit-scrollbar-thumb — scroll slider on scrollbar
  • ::-webkit-scrollbar-track – Scrollbar track
  • ::-webkit-scrollbar-track-piece — The track part of the scrollbar without a slider
  • ::-webkit-scrollbar-corner — The part where vertical and horizontal scrollbars meet
  • ::-webkit-resizer — Partial styles for corner sections of certain elements (example: draggable button for Textarea)

Attached is the MDN document portal: developer.mozilla.org/zh-CN/docs/…

2.2 Compatibility Issues

Of course, this solution has some compatibility issues and is only available in webKit-enabled browsers (e.g., Google Chrome, Apple Safari). The -webkit- prefix is a private property prefix in CSS3 that is tailored to a particular browser kernel. We went to Can I Use to check out the compatibility:

As you can see, the compatibility isn’t that great, but we shouldn’t worry too much about it because we’re just users of the rules, not makers of them.

Three, test

3.1 The entire scroll bar

We test this property by property, using ::-webkit-scrollbar first. To test the effect, change its width:

/* The entire scroll bar */
/* Width and height correspond to the width of the vertical and horizontal scroll bars */
::-webkit-scrollbar {
    width: 50px;
}
Copy the code

As you can see, the scroll bar seems to have “disappeared”, but you can still scroll the page by dragging the mouse. Let’s add a background color to it for kangkang effect:

/* The entire scroll bar */
::-webkit-scrollbar {
    width: 50px;
    background-color: skyblue;
}
Copy the code

After adding the background color, the scroll bar “appears” again. Setting the ::-webkit-scrollbar property invalidates the scrollbar default. In this case, we must use it in conjunction with other attributes.

3.2 Arrow button on scroll bar

Use the :-webkit-scrollbar-button attribute and find that this attribute has no effect when used alone:

/* Arrow button on scroll bar */
::-webkit-scrollbar-button {
    background-color: slateblue;
}
Copy the code

So let’s add the previous code and try again:

We can see that the background color of the button position of the two arrows has changed. It appears that the other pseudo-class properties of the scrollbar need to work with the ::-webkit-scrollbar in step 1.

3.3 Scroll slider on scroll bar

We use ::-webkit-scrollbar-thumb to change the style of the slider in the scrollbar:

/* The entire scroll bar */
::-webkit-scrollbar {
    width: 50px;
    background-color: skyblue;
}

/* The slider on the scroll bar */
::-webkit-scrollbar-thumb {
    background-color: orange;
}
Copy the code

3.4 Scroll bar track

Change the scrollbar track style with ::-webkit-scrollbar-track property:

/* The entire scroll bar */
::-webkit-scrollbar {
    width: 50px;
    background-color: skyblue;
}

/* The slider on the scroll bar */
::-webkit-scrollbar-thumb {
    background-color: orange;
}

/* Scroll bar track */
::-webkit-scrollbar-track {
    background-color: hotpink;
}
Copy the code

Through the renderings, we can find that the background color of the set scrollbar track covers the background color of the whole set scrollbar (sky blue). Is it possible to achieve the effect of nested inside and outside of two background colors? At present, several attempts have no effect, so we can only give up temporarily. The following is the effect code of nested background colors that has not been tested:

/* Background color nesting code is not implemented */::-webkit-scrollbar {/* padding-enabled */ padding-enabled:4px;
    width: 50px;
    background-color: skyblue;
    box-sizing: border-box; } ::-webkit-scrollbar-track {/* can not be adjusted by the width of */ / width:80%;
    background-color: hotpink;
}
Copy the code

In this case, if we need to adjust the background color of the scrollbar, we can choose either ::-webkit-scrollbar-track or ::-webkit-scrollbar-track.

3.5 The scroll bar has no track part of the slider

-webkit-scrollbar-track ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece

/* The entire scroll bar */
::-webkit-scrollbar {
    width: 50px;
}

/* The slider on the scroll bar */
::-webkit-scrollbar-thumb {
    background-color: orange;
}

/* Scroll bar track */
::-webkit-scrollbar-track {
    background-color: hotpink;
}

/* The track part of the scroll bar without the slider */
::-webkit-scrollbar-track-piece {
    background-color: purple;
}
Copy the code

The above code works as expected, but when I set the slider to a transparent background color, it will be purple all over and not pink at the bottom of the slider. So, if you want to change the background color, go to the track.

3.6 Test Summary

  1. Set up the::-webkit-scrollbarProperty invalidates the scroll bar default style
  2. Other private properties that modify the scrollbar style need to be used::-webkit-scrollbarProperties using
  3. If YOU want to set the scrollbar background color,::-webkit-scrollbar 、 ::-webkit-scrollbar-track 、 ::-webkit-scrollbar-track-pieceSet one of the three properties.

Four, start to change

4.1 Pure color scroll bar

After studying the CSS properties modified by the scroll bar, we can finally start working on it. First, we can modify a plain color scroll bar to emulate the style of the scroll bar in Element:

/* The entire scroll bar */::-webkit-scrollbar {/* the width of the vertical scrollbar */ width:10px;
    /* Corresponds to the width of the horizontal scroll bar */
    height: 10px;
}

/* The slider on the scroll bar */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    border-radius: 32px;
}

/* Scroll bar track */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}
Copy the code

It looks good, much better than the default. Blue is used here. In actual development, the theme color of the project can be used as the color reference of the scroll bar.

4.2 The pattern is a scroll bar

We can use the background-image attribute to achieve the pattern effect of the scroll bar (the effect is not my original), directly to the code:

/* The entire scroll bar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* The slider on the scroll bar */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* Key code */
    background-image: -webkit-linear-gradient(45deg.rgba(255.255.255.0.4) 25%,
            transparent 25%,
            transparent 50%.rgba(255.255.255.0.4) 50%.rgba(255.255.255.0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}

/* Scroll bar track */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}
Copy the code

Feel the effect bang bang (the premise is like flashy people), echocardiography as action, quickly Copy down standby bar!

The resources

  • Developer.mozilla.org/zh-CN/docs/…

Comments to send books

I saw some big guy smoking a book last week. Web Front-end Performance Optimization is one of the books I’ve been reading lately, and I’m really enjoying it, so I’ll pick one of the lucky readers in the comments section and send it in. In order to guarantee that the certificate is genuine, I will buy it on JINGdong.

About Web Front-end Performance Optimization:

Focusing on Web performance optimization, this paper introduces all aspects of knowledge involved in performance optimization, explains in detail why to do performance optimization, where to start performance optimization, and what problems should be considered in the process of performance optimization? What are the trade-offs?

It is said that more attention will increase the odds of winning, so join the discussion in the comments section. The draw will take place this Sunday morning, and a screenshot of the draw (GIF) and the winner’S ID will be posted at the end of the draw. An online lottery tool will be used)