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

Simple version

The detailed code is not posted here, the demo can be found by looking at the source of the specific style settings. Take a look at the style of the second scroll bar in Demo2

1234567891011121314151617181920212223

/* 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 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 shadow inside the slider + rounded corners * /::-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.

1234567891011121314151617181920212223242526272829303132333435363738394041424344

:Horizontal //horizontal pseudo-class applies to scroll bars in any horizontal direction:Vertical //vertical pseudo-class applies to any vertical scroll bar:Decrement the//decrement pseudo-class applies to button and track fragments. Represents a descending button or track fragment, such as an area and a button that can make the area move up or to the right:increment the//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 make the area move down or to the left:start the//start pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed in front of the slider:End the//end pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed behind the slider:Double-button the//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 the//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-the button pseudo-class indicates that there are no buttons at the end of the track. :Corner-present the//corner-present pseudo-class indicates whether the corners of the scroll bar exist. :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 { /* scroll bar Upper half or left half */} ::-webkit-scrollbar-thumb:window-inactive { / * When 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 scroll bar * /}

CSS3 custom scroll bar style-webkit-scrollbar