CSS Custom scroll bar style

Original: http://www.chinaz.com/design/2011/0406/170105.shtml

I believe many people have encountered in the design of the custom scroll bar style, before I was trying to persuade the designer to accept the browser's own scroll bar style, but this can only avoid or solve the problem, recently encountered in the project, just to summarize. Of course, the scroll bar style that is compatible with all browsers currently does not exist.

The scroll bar style under IE

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

These style rules are simple:

Scrollbar-arrow-color:color; /* The color of the triangular arrows */

Scrollbar-face-color:color; /* Color of the stereo scrollbar (including the background color of the arrow part) */

Scrollbar-3dlight-color:color; /* Color of the solid scroll bar */

Scrollbar-highlight-color:color; /* Highlight color of scroll bar (left shadow?) ）*/

Scrollbar-shadow-color:color; /* Color of the stereoscopic scrollbar shadow */

Scrollbar-darkshadow-color:color; /* Color of the outer shadow of the stereoscopic scroll bar */

Scrollbar-track-color:color; /* Stereo scroll bar background color */

Scrollbar-base-color:color; /* The base color of the scroll bar */

That's about it, you can also define the cursor to define the mouse gesture of the scrollbar.

Here, a long time ago danger made a flash-based visualization tool , simple but useful:

CSS styles are automatically generated by checking CSS options, which are no longer too much. Well, thanks for the old wet recommendation of the big cat.

Custom scroll bar styles for WebKit

Yes, here's what we're going to focus on today.

As you can see from the previous section of the style name, ie can only define attributes such as color in the relevant section, which is too inflexible.

WebKit recently implemented the support for scroll bars, let's look at a simple demo:

However, WebKit is no longer using a few simple CSS properties, but a lump of CSS pseudo-elements:

-webkit-scrollbar scroll bar integral part

-webkit-scrollbar-button buttons at both ends of the scroll bar

-webkit-scrollbar-track outer orbit

-webkit-scrollbar-track-piece inner track, scroll bar middle section (remove)

-webkit-scrollbar-thumb (drag bar?) The slider? The scroll bar inside can drag of that, swollen translation good? ）

-webkit-scrollbar-corner Corner

-webkit-resizer define 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 Web site.

Of course WebKit offers more than that, there are many pseudo-classes that can enrich the scrollbar style:

: Horizontal–horizontal pseudo-class applied to horizontal scroll bars

: vertical–vertical pseudo-class applied to vertical scroll bars

:d ecrement–decrement pseudo-class is applied to button 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 scrollbar). ）

: The increment–increment pseudo-class is similar to decrement to indicate whether a button or inner track will increase the position of the viewport (for example, the bottom of the vertical scrollbar and the right side of the horizontal scroll bar). ）

: The Start–start pseudo-class is also applied to buttons and sliders. It is used to define whether the 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 use in buttons and inner tracks. Used to determine if a button is one of a pair of buttons placed on the same side of the ScrollBar. For an inner track, it indicates whether the inner track is close to a pair of buttons.

: single-button– similar to Double-button pseudo class. For a button, it is used to determine whether a button is independent of a section of the scrollbar. In the inner layer, it indicates whether the inner track is close to a single-button.

: The no-button– is used for inner tracks, indicating whether the inner track is to be scrolled to the end of the scrollbar, for example, when there are no buttons at both ends of the scroll bar.

: The corner-present– is used for all scroll bar tracks, indicating whether the scrollbar fillet is displayed.

: The window-inactive– is used for all scrollbar tracks, indicating whether a page container (element) that applies the scroll bar is currently active. (in the recent version of WebKit, this pseudo-class can also be used for:: 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: pseudo-classes such as active can also be used in scroll bars.

About the specific demo, here no longer do, online already have a lot of demo can refer to, for example, WebKit official this, specific online projects also have ready-made examples, for example, QQ space Check-in pop-up box and Watercress said the right side of the details bar (a message when more comments will be displayed).

It is worth mentioning that the implementation of this pseudo-class and pseudo-elements of WebKit is very powerful, although there are a lot of classes, but we can use the scroll bar as a page element to define, but also can be used in some advanced CSS3 properties, such as gradients, fillets, rgba and so on, of course, some places can also use pictures, Then the picture can be converted to Base64, in short, you can play it.

Reference article:

Styling Scrollbars

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

CSS Custom scroll bar style