Use css to customize the scroll bar of the webkit kernel browser, css webkit

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.