css优化滚动条样式

@年年有鱼

于 2019-08-07 14:59:22 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_40735186/article/details/98748774

前端专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨了CSS中滚动条样式的定制方法，通过详细解析各伪元素属性，如::-webkit-scrollbar-track-piece, ::-webkit-scrollbar等，帮助读者掌握如何精细调整网页滚动条的外观，包括宽度、高度、背景颜色及圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

::-webkit-scrollbar-track-piece {
  -webkit-border-radius: 0
}
::-webkit-scrollbar {
  width: 5px;
  height: 10px
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #b8b8b8;
  -webkit-border-radius: 6px;
  outline-offset: -2px;
  filter: alpha(opacity = 50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5
}
::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #878987;
  -webkit-border-radius: 6px
}