Hide scroll the scroll bar :: - webkit-scrollbar
::-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 */
- :: - webkit-scrollbar integral part of the scroll bar
- :: - webkit-scrollbar-thumb scroll bar inside the small box, can be moved upward downward (moved to the left or right, depending on whether the vertical scroll bar is a horizontal scroll bar)
- :: - webkit-scrollbar-track of the scroll bar track (which is equipped with Thumb)
- :: - at both ends of the track buttons webkit-scrollbar-button scroll bar that allows fine-tuning the position by clicking on the small square.
- :: - webkit-scrollbar-track-piece inner orbit scroll bar intermediate portion (removed)
- :: - webkit-scrollbar-corner edges, that is the intersection of two scrollbars
- :: - for adjusting the size of the element by dragging widgets on the corner of webkit-resizer two scroll bars
Detailed Settings
The definition of the scroll bar is the use of pseudo-elements and pseudo-classes, what is it pseudo-elements and pseudo-classes do?
Pseudo-classes you should be very familiar with the: link,: focus,: hover, in addition CSS3 has added many pseudo-class selectors, such as: nth-child,: last-child,: nth-last-of-type () and so on.
CSS pseudo-elements we've seen before :: first-line,: first-letter,: before,: after. So in CSS3, the pseudo-element has been adjusted, increased in the past on the basis of a ":" which is now turned into a ":: first-letter, :: first-line, :: before, :: after", In addition CSS3 also added a ":: selection". Two "::" and a ":" in css3 mainly used to distinguish between pseudo-classes and pseudo elements.
Pseudo-classes and pseudo-elements of webkit is very strong, you can put the scroll bar as a page element to define, combined with some advanced CSS3 properties, such as gradients, rounded corners, RGBa and so on. Then if some places use a picture, the picture can also be converted into Base64, otherwise the load that each had multiple images, increase the number of requests.
Any object can be set: border, shadow, background images, etc., scroll bars created any natural behavior will be accomplished in accordance with its interactive set the operating system itself. The following pseudo-classes can be applied to the above pseudo-element. A little complex, specifically how to write can see the first demo, there are also comments.
: Horizontal
// Horizontal pseudo-class applies to any horizontal scroll bar in the direction
: Vertical
// Vertical pseudo-class for any vertical scroll bar
: Decrement
// Decrement button pseudo-class and is suitable for orbital debris. Represents a decrement button or orbital debris, for example can be made up or move to the right area and region buttons
: INCREMENT
// INCREMENT button pseudo-class and is suitable for orbital debris. Represents a button or incremental orbital debris, for example, that the region moved to the left or downward region and buttons
: Start
// Start button pseudo-class and is suitable for orbital debris. Mean an object (button orbital debris) on the front slider
: End
// End pseudo-class applies to buttons and orbital debris. Mean an object (button orbital debris) on the back of the slider
: Double-Button
// Double-Button button pseudo-class and is suitable for orbital debris. Determine whether the location of the end of the track is a pair of buttons. That is Orbital debris next to a pair of buttons together.
: SINGLE-Button
// Button SINGLE-button pseudo-class and is suitable for orbital debris. Determine whether the location of the end of the track is a button. That is Orbital debris next to a separate button.
: Button NO-
NO-Button class represents a pseudo track position is not the end button.
: corner-Present
// corner Present pseudo-class represents a scrollbar corner exists.
: window-inactive
// for all the scroll bar, scroll bar represents the area containing the focus is not in the window of time.
:: - WebKit-ScrollBar-Track-piece ...: Start {
/ * last half or the left half of the scroll bar * /
}
:: - WebKit-Thumb-ScrollBar: window-inactive {
/ * when the focus is not in the current state of the region of the slider * /
}
:: - WebKit-scrollBar-button: horizontal: Decrement: hover {
/ * when the mouse button status on the horizontal scroll bar below * /
}