This is the 27th day of my participation in Gwen Challenge.

Introduction to 👽

Last time and you introduced some relevant knowledge points in DOM Scroll, today again to talk with you about the relative of scroll -CSS scrollbar some relevant knowledge points. No one is unfamiliar with the Scrollbar, but most people will struggle to adjust its style. Because there is currently no unified standard for almost all scrollbar-related attributes, you should be careful to use them in actual production environments.

👽 WebKit kernel implementation

::-webkit-scrollbar

This is the implementation of Chrome Stream browser. ::-webkit-scrollbar is actually a pseudo element in CSS that selects an entire scrollbar. Attributes such as display, width, height, border, background, and so on are basically supported.

The most commonly used is display: None, which can be set to hide the scroll bar while preserving the scroll feature. Similar pseudo-elements include the following:

::-webkit-scrollbar-button: scrollbar button ::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece: - webkit-Scrollbar-thumb: Scrollbar ::-webkit- Scrollbar-corner: the cross part when there are two horizontal and vertical scrollbars simultaneouslyCopy the code

Finally, if you have a div that has both vertical and horizontal scrollbars, how do you select them? For this kind of problem must be combined with the corresponding pseudo class.

::-webkit-scrollbar:horizontal horizontal scrollbar: :-webkit-scrollbar:vertical vertical scrollbar is selected

👽 Implementation in Firefox

The implementation in Firefox is much simpler, and of course thinner, so I won’t focus on it here. The implementation of this section is all CSS properties.

Scrollbar-width: indicates the width of the scrollbar

Scrollbar-color: indicates the color of the scrollbar.

👽 epilogue

May there be no compatibility problems, respect.