Use pseudo-class selector ::-webkit-scrollba
and width
to set the width of the scrollbar.
Grammar format:
.main::-webkit-scrollbar{
width:宽度值;
}
Modify the scroll bar style:貌似不兼容所有浏览器
-
::-webkit-scrollbar The whole part of the scroll bar
-
::-webkit-scrollbar-thumb The small box in the scroll bar (ie, the scroll bar slider), which can move up and down (or the horizontal scroll bar can move left to right)
-
::-webkit-scrollbar-track The track of the scroll bar (corresponding to the scroll bar groove in the above picture, which contains Thumb, that is, the scroll bar slider)
-
::-webkit-scrollbar-button Buttons at both ends of the track of the scroll bar, allowing to fine-tune the position of the small box by clicking
-
::-webkit-scrollbar-corner The corner, where the two scrollbars meet
-
::-webkit-scrollbar-track-piece Inner track, the middle part of the scrollbar
-
::-webkit-resizer A gizmo at the intersection of two scrollbars for resizing elements by dragging
/*定义滚动条样式(高宽及背景)*/
.main::-webkit-scrollbar {
width: 6px; /* 滚动条宽度, width:对应竖滚动条的宽度 height:对应横滚动条的高度*/
height:4px;
background: #007acc;
}
/*定义滚动条轨道(凹槽)样式*/
.main::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 较少使用 */
border-radius: 3px;
background:rgba(0,0,0,0.1);
}
/*定义滑块 样式*/
.main::-webkit-scrollbar-thumb {
border-radius: 3px;
height: 100px; /* 滚动条滑块长度 */
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
background:rgba(0,0,0,0.2);
}