CSS setting scroll bar style instance code

This article mainly introduces the CSS set scroll bar style instance code, very good, has certain reference value, needs the friend reference

The implementation code for the CSS settings scroll bar style is as follows:

::-webkit-scrollbar scroll bar integral part
::-webkit-scrollbar-thumb A small square inside a scrollbar that can move up or down (or left to right, depending on whether it is a vertical scrollbar or a horizontal scrollbar)
::-webkit-scrollbar-track Track of the ScrollBar (with thumb inside)
The::-webkit-scrollbar-button scroll bar tracks the ends of the buttons, allowing you to fine-tune the position of the small squares by clicking.
::-webkit-scrollbar-track-piece inner track, scroll bar middle section (remove)
::-webkit-scrollbar-corner Corner, which is the intersection of two scroll bars
::-webkit-resizer A small control that is used to resize an element by dragging at the intersection of two scroll bars

/* Define the width of the scrollbar and the background aspect corresponding to the size of the scroll bar */::-webkit-scrollbar{    width:16px respectively;    height:16px;    Background-color: #F5F5F5;} /* Define scroll bar track inner Shadow + fillet */::-webkit-scrollbar-track{    -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,0.3);    border-radius:10px;    Background-color: #F5F5F5;} /* Define the slider inner Shadow + fillet */::-webkit-scrollbar-thumb{    border-radius:10px;    -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,.3);    Background-color: #555;}

Detailed settings

Defining scrollbars is the use of pseudo-elements and pseudo-classes, what are pseudo-elements and pseudo-classes?

Pseudo-class people should be very familiar with: Link,:focus,:hover, in addition to CSS3 also added a lot of pseudo-class selectors, such as: Nth-child,:last-child,:nth-last-of-type () and so on.

Pseudo elements in CSS we have seen before: First-line,:first-letter,:before,:after. Then in the CSS3, the pseudo-elements have been adjusted, on the basis of a previous increase of a ":" That is now become ":: First-letter,::first-line,::before,::after", the other CSS3 also added a ":: Selection ". Two "::" and a ":" are mainly used to distinguish pseudo-classes and pseudo-elements in CSS3.

WebKit pseudo-class and pseudo-elements of the implementation is very strong, can be used as a page element to define the scroll bar, combined with some advanced CSS3 properties, such as gradients, fillets, rgba and so on. Then if some places to use the picture, you can also convert the picture can be Base64, or each time you have to load that multiple images, increase the number of requests.

Any object can be set: border, shadow, background picture, and so on, the created scroll bar will follow the operating system's own settings to complete its interaction behavior. The following pseudo-class can be applied to the above pseudo-elements. A little complex, how to write can see the first demo, there are comments.

: Horizontal//horizontal pseudo-class applies to scroll bars in any horizontal direction: The Vertical//vertical pseudo-class applies to any vertical scrollbar: The decrement//decrement pseudo-class applies to button and track fragments. Represents a descending button or track fragment, such as an area and a button that moves the area up or to the right: the Increment//increment pseudo-class applies to button and track fragments. Represents an incremented button or track fragment, such as an area and a button that can move a region down or to the left: the Start//start pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed in front of the slider: the End//end pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed behind the slider: the Double-button//double-button pseudo-class applies to button and track fragments. Determines whether the position of the end of the track is a pair of buttons. That is, the track fragment is next to a pair of buttons. : Single-button//single-button pseudo-class applies to button and track fragments. Determines whether the position of the end of the track is a button. That is, the orbital fragment is next to a separate button. : No-buttonno-button pseudo-Class indicates that there is no button at the end of the track. : The corner-present//corner-present pseudo-class indicates whether the corners of the scroll bar exist. : window-inactive//applies to all scrollbars, representing the area that contains the scrollbar, when the focus is not in the window. ::-webkit-scrollbar-track-piece:start {/* scroll bar Upper half or left half */}::-webkit-scrollbar-thumb:window-inactive {/* When the focus is not in the state of the current region slider */}::-webkit-scrollbar-button:horizontal:decrement:hover {/* When the mouse is in the state of the button below the horizontal scrollbar */}