CSS - 自定义滚动条
...大约 1 分钟
网页自带的滚动条往往很难看,这时候就可以考虑用 css 自定义一个好看的滚动条了
警告
非标准: 该特性是非标准的,请尽量不要在生产环境中使用它
(但如果是Electron
的话还是可以的哦)
伪类选择器
CSS 属性 | 描述 |
---|---|
::-webkit-scrollbar | 整个滚动条 |
::-webkit-scrollbar-thumb | 滚动条滑块 |
::-webkit-scrollbar-track | 滚动条轨道 |
::-webkit-scrollbar-button | 滚动条按钮 |
::-webkit-scrollbar-track-piece | 滚动条轨道的中间部分 |
::-webkit-scrollbar-corner | 滚动条交汇处 |
::-webkit-resizer | 滚动条交汇处的小方块 |
示例
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
width: 10px;
}
/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* 设置滚动条滑块在悬停状态下的样式 */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Powered by Waline v3.4.1