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 in IE: Example

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 part) */scrollbar-3dlight-color: color;/* color of the highlighted side of the stereo scroll bar */scrollbar-Highlight-color: color;/* highlighted color of the scroll bar (left shadow ?) */Scrollbar-shadow-color: color;/* color of the stereo scroll bar shadow */scrollbar-darkshadow-color: color; /* color of the Shadow outside the three-dimensional scroll bar */scrollbar-track-color: color;/* color of the background of the three-dimensional scroll bar */scrollbar-base-color: color; /* base color of the scroll bar */

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

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.

Scroll bar style in WebKit: it is not simply a few CSS attributes, but a bunch of CSS pseudo elements:

:-Webkit-scrollbar {}/* overall part of the scroll bar */:-webkit-scrollbar-button {}/* buttons at both ends of the scroll bar */:: -webkit-scrollbar-track {}/* outer track */:-webkit-scrollbar-track-piece {}/* inner track, middle part of the scroll bar (excluding )*/: :-webkit-scrollbar-thumb {}/* drag bar? Slider? The one that can be dragged in the scroll bar is swollen? */:-Webkit-scrollbar-corner {}/* 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, and there are many pseudo classes that can enrich the scroll bar style:

: Horizontal {}/* the scroll bar applied to the horizontal direction */: vertical {}/* the scroll bar applied to the vertical direction */: decrement {}/* applies to buttons and inner tracks (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 .) */: Increment {} is similar to: decrement {}/*. It is 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 .) */: Start {}/* is also applied to buttons and slide. It defines whether an object is placed before the slider. */: End {}/* is similar to: start {} to identify 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: double-button {}/*. It is used to determine whether a button is independent of itself in a segment of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a single-button. */: No-button {}/* is used for the inner track to indicate whether the inner track 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 {}/* is 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.