跳至主要內容

CSS - 自定义滚动条

Kamimika...大约 1 分钟CSSCSS滚动条笔记

网页自带的滚动条往往很难看,这时候就可以考虑用 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;
}
上次编辑于:
贡献者: wzh
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.4.1