浏览器滚动条
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
滚动条的默认样式
image.png
css对应着上图的滚动条的图实
- ::-webkit-scrollbar 滚动条整体部分，支持属性有宽度和高度 background border 如一个块元素
- ::-webkit-scrollbar-button 滚动条两端的按钮，支持背景，可以让起不现实
- ::-webkit-scrollbar-track 外层轨道，可以用display： none 让其不显示，也可以添加背景图片，颜色改变显示效果
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分除去
- ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式
我们这边默认的样式风格
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: #efefef;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: rgba(0, 0, 0, .35);
}
