WebKit kernel browser scroll bar customization

::-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*/}

The area pair that the above CSS code governs is the relationship: the numbers in the comments above correspond to the numbers in.

As stated below:

• ::-webkit-scrollbar        The whole portion of the scrollbar, where the properties are Width,height,background, Border (just like a block-level element).
• ::-webkit-scrollbar-button      The buttons at both ends of the scrollbar. You can use Display:none to let it not display, you can also add a background image, color change the display effect. The
• ::-webkit-scrollbar-track         outer track. You can use Display:none to let it not display, you can also add a background image, color change the display effect.
• ::-webkit-scrollbar-track-piece        The inner track, the middle part of the scroll bar (except).
• ::-webkit-scrollbar-thumb                the part of the scroll bar that you can drag
• ::-webkit-scrollbar-corner                Corner
• ::-webkit-resizer                        define the style of the drag block in the lower-right corner

Note: When defining width,height for each of these sections. Like the following function: If the horizontal scrollbar, the Width property does not work, the Height property is used to control the corresponding portion of the scrollbar vertical direction height, if the vertical scroll bar, the Height property does not work, the Width property is used to control the corresponding portion of the widths.

To be able to get through the above constant test. In Chrome, the sections in the scroll bar are the same as the block-level elements in the DOM. By:-webkit-scrollbar and so on is similar to the original said CSS in the selector. And the properties in {}, you're as simple as controlling a block-level element (powerful AH).

CSS Part code:

#scroll-1{width:200px;        height:200px;    Overflow:auto; } #scroll-1Div {width:400px;    height:400px; } #scroll-1::-webkit-ScrollBar {width:10px;    height:10px; } #scroll-1::-webkit-scrollbar-button {background-color: #FF7677; } #scroll-1::-webkit-scrollbar-Track {background: #FF66D5; } #scroll-1::-webkit-scrollbar-track-piece {background:url (http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);} #scroll-1::-webkit-scrollbar-thumb{background: #FFA711; Border-radius:4px; } #scroll-1::-webkit-scrollbar-Corner {background: #82AFFF; } #scroll-1::-webkit-scrollbar-Resizer {background: #FF0BEE; }

HTML structure:

<div id='scroll-1'> <div > <p>Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It's mainly about HTML .5Css3, Javascript,jquery and so on. In addition, there are some practical examples of PHP languages. </p> <p>Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It's mainly about HTML .5Css3, Javascript,jquery and so on. In addition, there are some practical examples of PHP languages. </p> <p>Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It's mainly about HTML .5Css3, Javascript,jquery and so on. In addition, there are some practical examples of PHP languages. </p> <p>Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It's mainly about HTML .5Css3, Javascript,jquery and so on. In addition, there are some practical examples of PHP languages. </p> <p>Please select the WebKit kernel browser to see the scroll bar changes normally. World is a web front-end technology blog. It's mainly about HTML .5Css3, Javascript,jquery and so on. In addition, there are some practical examples of PHP languages. </p> </div> </div>

With the above, we can almost rewrite the scroll bar of the site, but WebKit provides more pseudo-classes that can be customized to enrich the scroll bar style. This document is referenced in the following sections: https://www.webkit.org/blog/363/styling-scrollbars/

• : Horizontal horizontal pseudo-class, mainly used to select horizontal direction scroll bar.
• : Vertical vertical Pseudo-class is mainly used to select the vertical scroll bar
• :d ecrement Decrement pseudo class 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 increment pseudo class is similar to decrement to indicate 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 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 can be used 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.
• : 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)

WebKit kernel browser scroll bar customization