CSS3 Custom scroll bar Style-webkit-scrollbar

Do not feel that the original browser with the scroll bar is not beautiful, but also see a lot of Web site custom scroll bar appears high-end, even the chrome32.0 Development Board has abandoned the original scroll bar, more Beautiful. How does the WebKit browser customize the scroll bar?

Objective

WebKit supports areas with overflow properties, list boxes, Drop-down menus, and textarea scroll bar custom styles, So the use is still quite large. of course, the scroll bar style that is compatible with all browsers currently does not Exist.

Demonstrate

Take a look at these 2 scroll bars demo:demo1 (image), demo2 (pure CSS3 Version)

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

[css]View PlainCopy

2. /* define the width of the scrollbar and the background aspect corresponding to the size of the scroll bar */
4. ::-webkit-scrollbar
6. {
8. width: 16px;
10. height: 16px;
12. background-color: #F5F5F5;
14. }
18. /* define scroll bar track inner Shadow + fillet */
20. ::-webkit-scrollbar-track
22. {
24. -webkit-box-shadow: inset 0 0 6px rgba (0,0,0,0.   3);
26. Border-radius: 10px;
28. background-color: #F5F5F5;
30. }
34. /* define the shadow inside the slider + rounded corners */
36. ::-webkit-scrollbar-thumb
38. {
40. Border-radius: 10px;
42. -webkit-box-shadow: inset 0 0 6px rgba (0,0,0,.   3);
44. background-color: #555;
46. }

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

Later on the code, or reproduced, late on the whole case

CSS3 Custom scroll bar Style-webkit-scrollbar