CSS to create a Web instance: Change the style of the scroll bar

Article Introduction: 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.

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.

The scroll bar style under IE

IE is the first to provide scroll bar style support, well, for many years, but other browsers have not supported, ie alone and defeated.

These style rules are simple:

• Scrollbar-arrow-color:color; /* Triangle Arrow Color *
• Scrollbar-face-color:color; /* The color of the three-dimensional scroll bar (including the background color of the arrow section) * *
• Scrollbar-3dlight-color:color; * * The color of the solid scroll bar bright Edge
• 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 of the outer shadow of the stereo scroll bar
• Scrollbar-track-color:color; /* Solid 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:

CSS styles can be automatically generated by selecting the CSS option, which is no longer described too much. 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 implemented a scroll bar support, first look at a simple demo:

However, WebKit is no longer a simple CSS attribute, but a bunch of CSS artifacts :

• ::-webkit-scrollbar scroll bar integral part
• ::-webkit-scrollbar-button The buttons at the ends of the scroll bar
• ::-webkit-scrollbar-track outer orbit
• ::-webkit-scrollbar-track-piece inner track, middle part of scroll bar (remove)
• ::-webkit-scrollbar-thumb (drag bar?) Slide block? The scroll bar inside can drag of that, swollen mody translation good? ）
• ::-webkit-scrollbar-corner Corner
• ::-webkit-resizer defines the style of dragging a block in the lower right corner

With these pseudo elements, you can completely rewrite the scroll bar style for a Web site.

Of course WebKit provides more than that, and there are many pseudo classes that can enrich the scroll bar style:

• : Horizontal–horizontal pseudo class applied to horizontal scroll bar
• : Vertical–vertical Pseudo class applies to scroll bars in vertical direction
• :d ecrement–decrement Pseudo class is applied to the button and the inner track (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). )
• : The increment–increment pseudo class is similar to the decrement to indicate whether the button or inner track will increase the position of the window (for example, underneath the vertical scroll bar and to the right of the horizontal scroll bar). )
• : The 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.
• :d ouble-button– the Pseudo class for the button and the inner track. 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 orbit 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 scroll bar 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.

In addition,: enabled,:d isabled,: hover and: Active and other pseudo classes can also be used in scroll bars.

On the specific demo, 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 there are a lot of categories, but we can use the scroll bar as a page element to define, and almost can be used some advanced CSS3 properties, such as gradients, rounded corners, rgba and so on, of course, some places can also use pictures, Then the picture can also be converted into Base64, in short, you can play it.

PS: The middle part of the terminology translation is not in place, welcome treatise.

Reference articles:

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