CSS3 custom scroll bar style, css3 custom scroll bar

CSS3 custom scroll bar style, css3 custom scroll bar

Do you think that the original scroll bar that comes with the browser is not beautiful? At the same time, you can see that the custom scroll bars of many websites appear high-end. Even the chrome32.0 Development Board discards the original scroll bar, which is more beautiful. Then how does the webkit browser customize the scroll bar?

Preface

Webkit supports areas with overflow attributes, list boxes, drop-down menus, and custom style of the textarea scroll bar, so it is very useful. Of course, the scroll bar style compatible with all browsers does not currently exist.

Demo

Let's take a look at the two scroll bar demos: demo1 (image version) and demo2 (pure CSS3 version)

Scroll bar Composition

• :-Webkit-scrollbar overall part of the scroll bar
• :-Webkit-scrollbar-thumb the small block in the scroll bar can be moved up and down (or to the left to the right, depending on the vertical scroll bar or horizontal scroll bar)
• :-Webkit-scrollbar-track the track of the scroll bar (which contains Thumb)
• :-Webkit-scrollbar-button the buttons at both ends of the track of the scroll bar. You can click the button to fine-tune the position of the small square.
• :-Webkit-scrollbar-track-piece inner orbital, middle part of the scroll bar (excluded)
• :-Webkit-scrollbar-corner, that is, the intersection of two scroll bars
• :-Webkit-resizer: a widget used to adjust the element size by dragging at the intersection of two scroll bars

Simplified Version

The detailed code will not be posted here. In the demo, you can view the source code to find the specific style settings. Let's see the style of the second scroll bar in demo2.

 

[Css]View plain copy

1. /* Define the size of the horizontal and vertical scroll bars corresponding to the height and width of the scroll bar and the background height */
2. :-Webkit-scrollbar
3. {
4. Width: 16px;
5. Height: 16px;
6. Background-color: # F5F5F5;
7. }
9. /* Define the shadow + rounded corner of the scroll bar track */
10. :-Webkit-scrollbar-track
11. {
12. -Webkit-box-shadow: inset 0 0 6px rgba (0.3, 0 );
13. Border-radius: 10px;
14. Background-color: # F5F5F5;
15. }
17. /* Define the shadow + rounded corner in the slider */
18. :-Webkit-scrollbar-thumb
19. {
20. Border-radius: 10px;
21. -Webkit-box-shadow: inset 0 0 6px rgba (0, 0,. 3 );
22. Background-color: #555;
23. }

 

 

Detailed settings

 

Defining a scroll bar is to use pseudo elements and pseudo classes. What are pseudo elements and pseudo classes?

We should be familiar with the pseudo class: link,: focus,: hover. In addition, many pseudo class selectors are added in CSS3, such as nth-child,: last-child ,: nth-last-of-type.

The pseudo elements in CSS have been viewed before: first-line,: first-letter,: before,: after. In CSS3, the pseudo element is adjusted, and a ":" is added based on the previous one, that is, the ": first-letter,: first-line ,:: before,: after, and ": selection" is added to CSS3 ". Two ":" and one ":" are mainly used in css3 to distinguish between pseudo classes and pseudo elements.

Webkit pseudo-classes and pseudo-elements are strongly implemented. You can define the scroll bar as a page element and combine them with some advanced CSS3 attributes, such as gradient, rounded corners, and RGBa. If you want to use an image in some places, you can convert the image to Base64. Otherwise, you have to load the multiple images each time to increase the number of requests.

Any object can be set: border, shadow, background image, etc. Any created scroll bar can complete interaction based on the operating system settings. The following pseudo classes can be applied to the above pseudo elements. It's a little complicated. For details, see the first demo, where there are annotations.

[Css]View plain copy

1. : Horizontal
2. // The horizontal pseudo class applies to the scroll bars in any horizontal direction.
4. : Vertical
5. // The vertical pseudo class applies to the scroll bars in any vertical direction.
7. : Decrement
8. // The decrement pseudo class applies to buttons and orbital fragments. Indicates a descending button or orbital fragment, for example, a region or button that can move the area up or down to the right.
10. : Increment
11. // The increment pseudo class applies to buttons and orbital fragments. Indicates an incremental button or orbital fragment. For example, you can move the area down or to the left.
13. : Start
14. // The start pseudo-class applies to buttons and orbital fragments. Indicates whether the object (Button rail fragment) is placed in front of the slider
16. : End
17. // The end pseudo class applies to buttons and orbital fragments. Indicates whether the object (Button rail fragment) is placed behind the slider
19. : Double-button
20. // The double-button pseudo class applies to buttons and orbital fragments. Determines whether the end of the track is a pair of buttons. That is, orbital fragments are placed together with a pair of buttons.
22. : Single-button
23. // The single-button pseudo class applies to buttons and orbital fragments. Determines whether the end of the track is a button. That is, the orbital fragment is placed next to a separate button.
25. : No-button
26. The no-button pseudo-class indicates that there is no button at the end of the track.
28. : Corner-present
29. // The corner-present pseudo class indicates whether the corner of the scroll bar exists.
31. : Window-inactive
32. // Applicable to all the scroll bars, indicating the areas that contain the scroll bars. The focus is not in this window.
34. :-Webkit-scrollbar-track-piece: start {
35. /* Top half or left half of the scroll bar */
36. }
38. :-Webkit-scrollbar-thumb: window-inactive {
39. /* When the focus is not in the status of the slider in the current area */
40. }
42. :-Webkit-scrollbar-button: horizontal: decrement: hover {
43. /* When the mouse is in the status of the button under the horizontal scroll bar */
44. }

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