Go to CSS3 custom scroll bar style-webkit-scrollbar

Scroll bar composition

• ::-webkit-scrollbar scroll bar integral part
• ::-webkit-scrollbar-thumb The small box inside the scrollbar, can move up or down (or left to right, depending on whether it is a vertical scroll bar or a horizontal scroll bar)
• ::-webkit-scrollbar-track track with scroll bar (with thumb inside)
• ::-webkit-scrollbar-button scroll bar on both ends of the track button, allows you to fine-tune the position of the small square by clicking.
• ::-webkit-scrollbar-track-piece inner track, scroll bar middle section (remove)
• ::-webkit-scrollbar-corner Corner, where two scroll bars intersect
• ::-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;      height:16px;      Background-color: #F5F5F5;  }    /* Define the Shadow + fillet in the scrollbar track */  ::-webkit-scrollbar-track  {      -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,0.3);      border-radius:10px;      Background-color: #F5F5F5;  }    /* Define the shadow inside the slider + 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.

: Horizontal//horizontal Pseudo class applies to scroll bars in any horizontal direction: vertical//vertical Pseudo-class applies to any vertical scrollbar:d ecrement//decrement pseudo class for buttons and tracks Fragments. Represents a descending button or track fragment, such as an area and a button that can move 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:d Ouble-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-button No-button Pseudo-class indicates that there is no button at the end of the track.    : Corner-present//corner-present Pseudo-class indicates whether a corner of a scrollbar exists.    : Window-inactive//Applies to all scrollbars, indicating the area containing the scrollbar, when the focus is not in the window. ::-webkit-scrollbar-track-piece:start{/*Upper half or left half of scroll bar*/}::-webkit-scrollbar-thumb:window-inactive{/*when the focus is not in the state of the current region slider*/}::-webkit-scrollbar-button:horizontal:decrement:hover{/*The state of the button on the bottom of the horizontal scroll bar when the mouse*/}

Go to CSS3 custom scroll bar style-webkit-scrollbar