-webkit-scrollbar scrollbar style settings

Have you ever thought that the original scroll bar that comes with the browser is very unsightly, and also seen that the custom scroll bars of many websites are very cool and high-end. Even after chrome 32.0, the original scroll bars have been abandoned, which is obviously beautiful So much, so how does the browser customize the scroll bar?

dividing line

First:
talk about compatibility: webkit supports custom styles for scroll bars such as areas with overflow attributes, list boxes, drop-down menus, textarea, etc., so it is still very useful. Of course, the styles compatible with all browser scroll bars still do not exist.
Example: classic demo

So I checked the compatibility out of curiosity: don't talk nonsense, look at the picture
write picture description here

Here are some properties of the scrollbar

::-webkit-scrollbar The whole part of the scroll bar

::-webkit-scrollbar-thumb The small square inside the scroll bar, which can be moved up and down (or left to right, depending on whether it is a vertical scroll bar or a horizontal scroll bar)

::-webkit-scrollbar-track Scrollbar track (with Thumb inside)

::-webkit-scrollbar-button Buttons at both ends of the scrollbar's track, allowing to fine-tune the position of the tiny squares by clicking.

::-webkit-scrollbar-track-piece inner track, middle part of scrollbar (removed)

::-webkit-scrollbar-corner Corner, where two scroll bars meet

::-webkit-resizer Gizmo on the intersection of two scroll bars for resizing elements by dragging

Go directly to the demo

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}

Curious friends can, open your favorite editor to test it, it is best to test it in the chrome browser, and then go to other browsers to see the effect, you will know the power of chrome, the pit father of IE.

Details: Defining the scroll bar is to use pseudo-elements and pseudo-classes

Pseudo-classes: :link, :hover, :visited, :active, :focus, etc. based on the current state of the element.
Pseudo-elements: :first-line, :before, :after, etc. Some operations on element-specific content.

In webkit, the scroll bar can be defined as a page element, and modified in combination with CSS3 properties.

-webkit-scrollbar scrollbar style settings

Guess you like