CSS3 scroll bar-webkit-scrollbar, css3

CSS3 scroll bar-webkit-scrollbar, css3

Webkit now supports the area with the overflow attribute, the list box, the drop-down menu, and the custom style of the textarea scroll bar.

If you want to skip the introduction and view the demo directly, click demo.

A scroll bar is a pseudo element that can be customized. This pseudo class can render webkit's own scroll bar and only render it according to the custom css information. For example:

:-Webkit-scrollbar {

Width: 13px;

Height: 13px;

}

The width and height attributes indicate the width of the vertical scroll bar and the height of the horizontal scroll bar. You can also specify the percentage as %. In this case, it indicates the percentage of the scroll bar in the entire window, for example:

:-Webkit-scrollbar {

Width: 50%;

}

The scroll bar includes a scroll button and a track. The track itself has further atmosphere fragment (track pieces) and a slider. The top and bottom areas of the Rail fragment value slider. The corner of the scroll bar is suitable for various styles, for example, you can adjust the size of the text area.

The following are all pseudo elements about the scroll bar:

:-Webkit-scrollbar {/* 1 */}

:-Webkit-scrollbar-button {/* 2 */}

:-Webkit-scrollbar-track {/* 3 */}

:-Webkit-scrollbar-track-piece {/* 4 */}

:-Webkit-scrollbar-thumb {/* 5 */}

:-Webkit-scrollbar-corner {/* 6 */}

:-Webkit-resizer {/* 7 */}

Any object can be set: border, shadow, background image, etc. Any created scroll bar can complete interaction based on the operating system settings. The following pseudo classes can be applied to the above pseudo elements.

: Horizontal (the horizontal pseudo class applies to the scroll bars in any horizontal direction)

: Vertical (vertical pseudo class applies to scroll bars in any vertical direction)

: Decrement (the decrement pseudo class applies to buttons and orbital fragments. This indicates a descending button or orbital fragment, for example, a region or button that can move the area up or down to the right)

: Increment (the increment pseudo class applies to buttons and orbital fragments. Indicates an incremental button or orbital fragment, for example, a region or button that can move the area down or left)

: Start (the start pseudo class applies to buttons and orbital fragments. Indicates whether the object (Button rail fragment) is placed before the slider)

: End (the end pseudo class applies to buttons and orbital fragments. Indicates whether the object (Button rail fragment) is placed behind the slider)

: Double-button (double-button pseudo class applies to buttons and orbital fragments. Determines whether the end of the track is a pair of buttons. That is, the orbital fragments are placed together with a pair of buttons .)

: Single-button (single-button pseudo class applies to buttons and orbital fragments. Determines whether the end of the track is a button. That is, the orbital fragment is placed next to a separate button .)

: No-button (no-button pseudo-class indicates that there is no button at the end of the track .)

: Corner-present (the corner-present pseudo class indicates whether the corner of the scroll bar exists .)

: Window-inactive (applicable to all scroll bars, indicating the area containing the scroll bar. The focus is not in this window .)

:-Webkit-scrollbar-track-piece: start {
/* Top half or left half of the scroll bar */
}

:-Webkit-scrollbar-thumb: window-inactive {
/* When the focus is not in the status of the slider in the current area */

}

:-Webkit-scrollbar-button: horizontal: decrement: hover {
/* When the mouse is in the status of the button under the horizontal scroll bar */

}

For more information, see http://my.oschina.net/hehongbo/blog/205128