Non-original, reproduced from CSS3 or CSS+JS to change the scroll bar style (compatible with all browsers)
This article is only a record of the solutions to problems encountered in personal learning, thanks to the predecessors for their exploration.
code part
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px; /*滚动条宽度*/
height: 16px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /*轨道阴影，放进Vue2会提示黄色波浪线，删除-webkit可解决*/
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: red;/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /*轨道阴影，放进Vue2会提示黄色波浪线，删除-webkit可解决*/
background-color: green; /*滚动条的背景颜色*/
}name explanation
- ::-webkit-scrollbar The whole part of the scroll bar
- ::-webkit-scrollbar-track The track of the scroll bar (with Thumb inside)
- ::-webkit-scrollbar-thumb The small box inside the scrollbar, which can move up and down (or left and right, depending on whether it is a vertical scrollbar or a horizontal scrollbar)
- ::-webkit-scrollbar-button Buttons at both ends of the track of the scrollbar, allowing to fine-tune the position of the small box by clicking.
- ::-webkit-scrollbar-track-piece Inner track, the middle part of the scrollbar (remove)
- ::-webkit-scrollbar-corner The corner, where the two scrollbars meet
- ::-webkit-resizer A gizmo at the intersection of two scrollbars for resizing elements by dragging
The above styles are valid for Google Chrome. (not compatible with Firefox)