Example of how CSS3 uses the webkit-scrollbar attribute to customize the scroll bar style-CSS Tutorial-php.cn

Example of how CSS3 uses the webkit-scrollbar attribute to customize the scroll bar style

黄舟

Release： 2017-07-21 14:19:21

Original

3864 people have browsed it

CSS3 custom scroll bar style-webkit-scrollbar

Sometimes it seems that the browser comes with it The original scroll bar is not very beautiful, so how does the webkit browser customize the scroll bar?

Webkit supports custom styles for areas, list boxes, drop-down menus, and textareas with overflow attributes. Of course, there is currently no scroll bar style that is compatible with all browsers.

Composition of scroll bar:

::-webkit-scrollbar         滚动条整体部分
 ::-webkit-scrollbar-thumb             滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
 ::-webkit-scrollbar-track      滚动条的轨道（里面装有thumb）
 ::-webkit-scrollbar-button      滚动条轨道两端的按钮，允许通过点击微调小方块的位置
 ::-webkit-scrollbar-track-piece    内层轨道，滚动条中间部分（除去）
 ::-webkit-scrollbar-corner     边角，及两个滚动条的交汇处
 ::-webkit-resizer       两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

Copy after login

Simple version of custom scroll bar:

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar{    
width: 16px;    
height: 16px;    
background-color: #f5f5f5;
}
/*定义滚动条的轨道，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{    
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    
border-radius: 10px;    
background-color: #f5f5f5;}
/*定义滑块，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{    
/*width: 10px;*/    
height: 20px;    
border-radius: 10px;    
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    
background-color: #555;
}

Copy after login

Custom scroll bar rendering:

The above is the detailed content of Example of how CSS3 uses the webkit-scrollbar attribute to customize the scroll bar style. For more information, please follow other related articles on the PHP Chinese website!