自定义scroll滑块样式

2022-08-21 12:49:57 浏览数 (2)

代码如下:

代码语言:javascript复制
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {
}
/* 外层轨道 */
::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 18px;
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
  
}
/* 滚动的滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 18px;
  background: #bbb;
}
/* 边角 */
::-webkit-scrollbar-corner {
  
}
/* 定义右下角拖动块的样式 */
::-webkit-resizer {
}

效果如下:

0 人点赞