CSS custom scroll bar style

I believe that many people have encountered the scenario of customizing the scroll bar style in design. I tried to persuade the designer to accept the scroll bar style that comes with the browser, but this can only be avoided but still cannot solve the problem, I recently encountered this in the project. I just want to summarize it. Of course, the scroll bar style compatible with all browsers does not currently exist.

Scroll bar style under IE

IE was the first to provide style support for the scroll bar. Well, it has been around for many years, but it has never been supported by other browsers, and IE is alone.

These style rules are simple:

• Scrollbar-arrow-color: color;/* color of the triangle arrow */
• Scrollbar-face-color: color;/* color of the three-dimensional scroll bar (including the background color of the arrow )*/
• Scrollbar-3dlight-color: color;/* color of the bright side of the stereo scroll bar */
• Scrollbar-highlight-color: color;/* The highlighted color of the scroll bar (left shadow ?) */
• Scrollbar-shadow-color: color;/* color of the shadow of the three-dimensional scroll bar */
• Scrollbar-darkshadow-color: color;/* color of the Shadow outside the three-dimensional scroll bar */
• Scrollbar-track-color: color;/* stereo scroll bar background color */
• Scrollbar-base-color: color;/* base color of the scroll bar */

You can also define cursor to define the mouse gesture of the scroll bar.

Here, danger developed a Flash-based visualization tool a long time ago, which is simple but easy to use:

Select the CSS option to automatically generate the CSS style. I will not introduce it too much here. Thank you for your suggestion.

Webkit custom scroll bar style

Yes. Here is what we will focus on today.

From the style names in the previous section, we can see that IE can only define the color and other attributes of the relevant section, which is too inflexible.

Webkit has recently implemented support for scroll bars. Let's take a look at a simple demo:

However, webkit no longer uses a few simple CSS attributes, but a bunch of CSSPseudo element:

• :-Webkit-scrollbar overall part of the scroll bar
• :-Webkit-scrollbar-button buttons at both ends of the scroll bar
• :-Webkit-scrollbar-track outer orbit
• :-Webkit-scrollbar-track-piece inner orbital, middle part of the scroll bar (excluded)
• :-Webkit-scrollbar-thumb (drag a bar? Slider? The one that can be dragged in the scroll bar. Is it swollen ?)
• :-Webkit-scrollbar-corner
• :-Webkit-resizer defines the style of the drag block in the lower right corner

With these pseudo elements, you can completely rewrite the scroll bar style of a website.

Of course, webkit provides more than this.Pseudo classTo enrich the scroll bar style:

• : The horizontal-horizontal pseudo class is applied to the horizontal scroll bar.
• : Vertical-vertical the pseudo class is applied to the scroll bar in the vertical direction.
• : Decrement-decrement: Apply the pseudo class to buttons and track piece ). It is used to indicate whether the button or the inner track reduces the position of the window (for example, the top of the vertical scroll bar and the left side of the horizontal scroll bar .)
• : The increment-increment pseudo class is similar to decrement, used to indicate whether the button or the inner track will increase the position of the window (for example, below the vertical scroll bar and right of the horizontal scroll bar .)
• The: start-start pseudo class is also applied to buttons and slide. It defines whether an object is placed before the slider.
• : End-similar to the start pseudo-class, it identifies whether the object is placed behind the slider.
• : Double-button-this pseudo class is used for buttons and inner orbital. Used to determine whether a button is placed in a pair of buttons at the same end of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a pair of buttons.
• : Single-button-is similar to the double-button pseudo class. A button is used to determine whether a button is independent of itself in the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a single-button.
• : No-button-used for the inner orbital, indicating whether the inner orbital must be rolled to the terminal of the scroll bar. For example, when there are no buttons at either side of the scroll bar.
• : Corner-present-used for all scroll bar tracks, indicating whether the rounded corner of the scroll bar is displayed.
• : Window-inactive-is used for all scroll bar tracks to indicate whether a page container (element) of the application scroll bar is currently activated. (In the latest version of webkit, this pseudo-class can also be used as the: selection pseudo element. The webkit team has plans to expand it and push it into a standard pseudo class)

In addition, pseudo classes such as enabled, disabled, hover, and active can also be used in the scroll bar.

For specific demos, I will not do any more here. There are already many demos available for reference on the Internet, such as webkit official ones. There are also examples available in specific online projects, for example, the "sign-in" dialog box of the QQ space and the "details" column on the Right of Douban (displayed when there are many comments on a piece of information ).

It is worth mentioning that the implementation of this pseudo class and pseudo element in webkit is very powerful. Although there are many categories, we can define the scroll bar as a page element, you can also use some advanced CSS3 attributes, such as gradient, rounded corner, and RGBa. Of course, you can also use images in some places, and then convert the images to Base64. In short, you can make full use of it.

PS: the translation of some intermediate terms is not in place.

References:

• Styling Scrollbars
• Creating custom scrollbars with CSS; How CSS isn' t great for every task

Original article: http://www.qianduan.net/css-custom-scroll-bar-style.html