CSS3 custom scroll bar style-webkit-scrollbar

CSS3 custom scroll bar style-webkit-scrollbar

• Edit
• Delete

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

/*defines the width of the scrollbar and the background aspect corresponding to the size of the scroll bar, respectively*/  ::-webkit-ScrollBar {width:16px;      height:16px; Background-color: #F5F5F5; }    /*define a scrollbar track inner Shadow + fillet*/  ::-webkit-scrollbar-Track {-webkit-box-shadow:inset0 06px Rgba (0,0,0,0.3); Border-radius:10px; Background-color: #F5F5F5; }    /*Define a Shadow + fillet within a slider*/  ::-webkit-scrollbar-Thumb {Border-radius:10px; -webkit-box-shadow:inset0 06px Rgba (0,0,0,.3); Background-color: #555; }  

Note that if you set the style for a scrolling div scroll bar individually, Div::-webkit-scrollbar, Div::-webkit-scrollbar-track, Div::-webkit-scrollbar-thumb

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.

1 : Horizontal2 //horizontal pseudo-class applies to scroll bars in any horizontal direction3   4 : Vertical5 //vertical pseudo-class applies to any vertical scroll bar6   7 :d ecrement8 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 right9   Ten : Increment One 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 A    - : 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 the    - : End - the//end pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed behind the slider -    + :d Ouble-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.  +    A : Single-button at 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 - the No-button pseudo-class represents the position where the track ended without a button.  -    - : Corner-present in the//corner-present pseudo-class indicates whether the corners of the scroll bar exist.  -    to : Window-inactive + //Applies to all scrollbars, indicating the area containing the scrollbar, when the focus is not in the window.  -    the ::-webkit-scrollbar-track-piece:start{ * /*Upper half or left half of scroll bar*/   $}Panax Notoginseng    - ::-webkit-scrollbar-thumb:window-inactive{ the /*when the focus is not in the state of the current region slider*/   +} A    the ::-webkit-scrollbar-button:horizontal:decrement:hover{ + /*The state of the button on the bottom of the horizontal scroll bar when the mouse*/   -}

Unwind Code

Original address: http://www.xuanfengge.com/css3-webkit-scrollbar.html

CSS3 custom scroll bar style-webkit-scrollbar