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

First Post:

Last Update:

Word Count:
292

Read Time:
1 min

::-webkit-scrollbar

滚动条整体部分，其中的属性有width，height，background，border，border-radius（就和一个块级元素一样）等。 其中： width：定义的是纵向滚动条的宽度。不能控制横向滚动条的宽度。 height：定义的是横向滚动条的高度。同理不能控制横向滚动条的高度 - 一个简单的演示
CSS - 7 lines 
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 让其不显示，也可以添加背景图片，颜色改变显示效果 - 演示
CSS - 4 lines 
1
2
3
4
::-webkit-scrollbar-button {
            background: red;
            border-radius: 2px;
}

::-webkit-scrollbar-track

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

::-webkit-scrollbar-track-

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

::-webkit-scrollbar-thumb

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

::-webkit-scrollbar-corner

边角

::-webkit-resizer

右下角拖动块
≡