Code examples for scrollbar style settings in CSS

because in most of the current projects are used in many of the scroll bar, sometimes used to simulate the scroll bar, now the scroll bar CSS can also be solved.

For example, NetEase mailbox scroll bar looks very good, is the use of CSS to set, and is WebKit browser. ：

The following explains how these properties are used, which means what they mean.

One: WebKit the following CSS settings scroll bar

There are 7 main properties below

1. ::-webkit-scrollbar The whole part of the scroll bar, you can set the width of what::-webkit-scrollbar-button scroll bar at both ends of the button::-webkit-scrollbar-track  outer orbit::- Webkit-scrollbar-track-piece  inner Rolling Groove::-webkit-scrollbar-thumb scroll slider::-webkit-scrollbar-corner Corner::- Webkit-resizer define the style of the drag block in the lower right corner

：

Above are the main settings properties of the scroll bar, as well as more detailed CSS properties

: Horizontal horizontal direction of scroll bar

: Vertical Vertical scroll bar

The :d ecrement 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). )

: Increment decrement is similar to indicating 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 scrollbar). )

: The 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)

CSS is also very simple, for example:

/* Set the style of the scrollbar */::-webkit-scrollbar {width:12px;} /* Scroll Groove */::-webkit-scrollbar-track {-webkit-box-shadow:inset006pxrgba (0,0,0,0.3); border-radius:10px;} /* scroll bar slider */::-webkit-scrollbar-thumb {Border-radius:10px;background:rgba (0,0,0,0.1);-webkit-box-shadow: Inset006pxrgba (0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {Background:rgba (255,0,0,0.4);}

Two: CSS settings scroll bar under IE

IE is relatively simple under that, the custom project is relatively small, all color.

1. scrollbar-arrow-color:color;/* Triangle Arrow Color */scrollbar-face-color:color; /* The color of the stereo scroll bar (including the background color of the arrow part) */scrollbar-3dlight-color:color; /* The color of the */scrollbar-highlight-color:color of the stereo scroll bar is bright; /* Highlight color of scroll bar (left shadow?) ) */scrollbar-shadow-color:color; /* Color */scrollbar-darkshadow-color:color of the stereoscopic ScrollBar shadow; /* The color */scrollbar-track-color:color of the shadow outside the stereo scroll bar; /* Stereo scroll bar background color */scrollbar-base-color:color; /* Base color of scroll bar */