默认滚动条样式修改
伪元素 -webkit-scrollbar
- 注意:仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用
滚动条元素组成
::-webkit-scrollbar 滚动条整体部分,可以设置宽度等
::-webkit-scrollbar-thumb 滚动条里面的滑块
::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)
滚动条设置
div::-webkit-scrollbar {
width: 3px;
height: 5px !important;
}
div::-webkit-scrollbar-thumb {
border-radius: 4px;
border-radius: 5px;
background: rgb(221, 222, 224);
transition: 0.3s ease-in-out;
}
div::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(3, 131, 226, 0.1);
}