Use css to customize the scroll bar of the webkit kernel browser, css webkit
Using css to set the webkit kernel browser's scroll bar mainly sets the following seven attributes:
1.:-webkit-scrollbar/* overall part of the scroll bar. You can set the width and height */
2.:-webkit-scrollbar-button/* buttons at both ends of the scroll bar */
3.:-webkit-scrollbar-track/* outer orbit */
4.:-webkit-scrollbar-track-piece/* inner scroll slot */
5.:-webkit-scrollbar-thumb/* scroll slider */
6.:-webkit-scrollbar-corner/* corner */
7.:-webkit-resizer/* defines the style of the drag block in the lower right corner */
:
Other attributes:
: Horizontal scroll bar
: Vertical scroll bar
: Decrement is applied to buttons and the track piece ). It is used to indicate whether the button or the inner track reduces the position of the window (for example, the top of the vertical scroll bar and the left side of the horizontal scroll bar .)
: The increment decrement is similar to that used to indicate whether the button or the inner track will increase the position of the window (for example, below the vertical scroll bar and right of the horizontal scroll bar .)
: The start pseudo class is also applied to buttons and slide. It defines whether an object is placed before the slider.
: End is similar to the start pseudo-class to identify whether the object is placed behind the slider.
: Double-button this pseudo class is used for buttons and inner orbital. Used to determine whether a button is placed in a pair of buttons at the same end of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a pair of buttons.
: Single-button is similar to the double-button pseudo class. A button is used to determine whether a button is independent of itself in the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a single-button.
: No-button is used for the inner orbital to indicate whether the inner orbital must be rolled to the terminal of the scroll bar. For example, when there are no buttons at either side of the scroll bar.
: Corner-present is used for all scroll bar tracks, indicating whether the rounded corner of the scroll bar is displayed.
: Window-inactive is used for all scroll bar tracks to indicate whether a page container (element) of the scroll bar is currently activated. (In the latest version of webkit, this pseudo-class can also be used as the: selection pseudo element. The webkit team has plans to expand it and push it into a standard pseudo class)