Customize the style of a scroll bar with CSS

I believe many people have encountered in the design of custom scroll bar style, before I was trying to convince designers to accept the browser with the scroll bar style, but this can only circumvent or solve the problem, recently encountered in the project, just to sum up. Of course, the scroll bar styles that are compatible with all browsers do not currently exist.

ie scroll bar style   IE is the first to provide the style of the scroll bar support, for many years, but other browsers have not supported, ie alone and defeated. The   code is as follows:------------------------------------------------------------------------------------------ Scrollbar-arrow-color:color; /* Triangle arrow color */  scrollbar-face-color:color; /* The color of the solid scroll bar (including the background color of the arrowhead) */  Scrollbar-3dlight-color:color; * * Solid scroll bar bright edge color */  scrollbar-highlight-color:color; /* The highlight color of the scroll bar (left shadow?) ) */  Scrollbar-shadow-color:color; /* Three-dimensional scroll bar shadow color */  scrollbar-darkshadow-color:color; /* The color */  scrollbar-track-color:color of the outer shadow of the stereo scroll bar; /* Stereo scroll bar background color */  scrollbar-base-color:color; /* The base color of the scroll bar */ ------------------------------------------------------------------------------------------ Presumably, you can also define the cursor to define the scroll bar's mouse gesture.   Here, a long time ago danger made a visual tool based on flash, simple but easy to use:   Select CSS options can automatically generate CSS style, here is no longer too much introduction. Well, thanks for the big cat's old wet recommendation.   WebKit custom scroll bar style   Yes, this is the focus of today.   from the previous section of the style name can be seen, ie can only define the relevant part of the color properties, so it is too inflexible.   WebKit recently realized the support of the scroll bar, first look at a simple demo:   However, WebKit is no longer with a few simple CSS attributes, but a bunch of CSS pseudo elements:  : horizontal–Horizontal pseudo class applies to horizontal scroll bars  : vertical–vertical pseudo classes apply to vertical scroll bars  :d ecrement–decrement pseudo classes apply to buttons and inner tracks (track piece). It is used to indicate whether the button or inner track will reduce the position of the window (for example, the top of the vertical scroll bar, the left side of the horizontal scroll bar).  : Increment–increment pseudo class and decrement are similar to indicate whether a button or inner track will increase the position of the window (for example, the bottom of the vertical scroll bar and the right side of the horizontal scroll bar).  : Start–start Pseudo class also applies to buttons and sliders. It is used to define whether an object is placed in front of the slider.  : end– is similar to the start pseudo class, which identifies whether the object is placed behind the slider. The  :d ouble-button– the pseudo class for use in buttons and in-layer orbits. One of a pair of buttons that determines whether a button is placed at the same end of the scroll bar. For an inner orbit, it indicates whether the inner track is close to a pair of buttons.  : single-button– is similar to Double-button pseudo class. For a button, it is used to determine whether a button is independent of the scroll bar. In the case of an internal orbit, it indicates whether the inner orbit is close to a single-button.  : no-button– is used in the inner orbit to indicate whether the inner track should be scrolled to the end of the scrollbar, for example, when there are no buttons at the ends of the scroll bar.  : corner-present– is used for all scrollbar tracks, indicating whether the rounded corners of the scroll bar are displayed.  : window-inactive– is used for all scrollbar tracks, indicating whether a page container (element) to which the scroll bar is applied is currently active. (in the most recent version of WebKit, the pseudo class can also be used to:: Selection pseudo elements.) The WebKit team has plans to extend it and push it into a standard pseudo class)   also: Enabled,:d isabled,: hover, and: active, and so on, can also be used in scroll bars.   about specific demos, here no longer do, online already have a lot of demo can refer to, for example, WebKit official this, the specific online project also has ready-made examples, such as QQ space of the check-in pop-up box and Watercress said the right side of the details bar (a piece of information commented on the time will show).   It is worth mentioning that the implementation of this pseudo class and pseudo element of WebKit is very powerful, although the classThere are many, but we can use the scroll bar as a page element to define, also can be used some advanced CSS3 properties, such as gradients, rounded corners, rgba and so on, of course, some places can also use pictures, and then the picture can also be converted into Base64, in short, you can enjoy the play.