WebKit the following CSS settings scroll bar

WebKit the following CSS settings scroll bar

1. There are 7 main properties:

1. ::-webkit-scrollbar The whole part of the scroll bar, you can set the width of what
2. ::-webkit-scrollbar-button buttons at both ends of the scroll bar
3. ::-webkit-scrollbar-track Outer Track
4. ::-webkit-scrollbar-track-piece inner Rolling groove
5. ::-webkit-scrollbar-thumb scrolling Slider
6. ::-webkit-scrollbar-corner Corner
7. ::-webkit-resizer Define the style of the drag block in the lower right corner

2.

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

1): Horizontal scroll bar in horizontal direction

2): Vertical scroll bar in vertical direction

3):d Ecrement is applied to the 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). )

4): Increment decrement similar, used to indicate whether a button or inner track will increase the position of the viewport (for example, the bottom of the vertical scroll bar and the right side of the horizontal scrollbar). )

5): Start Pseudo-class also applies to buttons and sliders. It is used to define whether the object is placed in front of the slider.

6): End is similar to the start pseudo-class, which identifies whether the object is placed behind the slider.

7):d Ouble-button the Pseudo-class for 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.

8): 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.

9): No-button for inner track, indicates whether the inner track is going to scroll to the end of the scrollbar, for example, when there are no buttons at both ends of the scroll bar.

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

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

4. Usage:

WebKit the following CSS settings scroll bar