HTML(CSS) Chromium内核浏览器自定义滑动条

First Post:

Last Update:

Word Count:
292

Read Time:
1 min

::-webkit-scrollbar

滚动条整体部分,其中的属性有width,height,background,border,border-radius(就和一个块级元素一样)等。 其中: width:定义的是纵向滚动条的宽度。不能控制横向滚动条的宽度。 height:定义的是横向滚动条的高度。同理不能控制横向滚动条的高度 - 一个简单的演示
1
2
3
4
5
6
7
::-webkit-scrollbar {
background: skyblue;
width: 10px;
height: 10px;
border:1px #000 solid;
border-radius: 2px;
}
它不仅能控制窗口的滚动条,也能控制标签的滚动条。

::-webkit-scrollbar-button

滚动条两端的按钮,可以用 display:none 让其不显示,也可以添加背景图片,颜色改变显示效果 - 演示
1
2
3
4
::-webkit-scrollbar-button {
background: red;
border-radius: 2px;
}

::-webkit-scrollbar-track

外层轨道,可以用 display:none 让其不显示,也可以添加背景图片,颜色改变显示效果 - 演示
1
2
3
::-webkit-scrollbar-track {
border: 1px pink solid;
}

::-webkit-scrollbar-track-

内层轨道,外层轨道设置了,这个内层轨道也会跟着变

::-webkit-scrollbar-thumb

滚动条里的滑块 - 演示
1
2
3
4
::-webkit-scrollbar-thumb {
background: black;
border: 1px white solid;
}

::-webkit-scrollbar-corner

边角

::-webkit-resizer

右下角拖动块