兼容edge、谷歌和火狐浏览器的滚动条样式纯css实现

Jing_ke9710

于 2022-01-11 16:28:32 发布

阅读量931

点赞数

CC 4.0 BY-SA版权

文章标签： css edge css3

本文链接：https://blog.youkuaiyun.com/weixin_45977607/article/details/122435419

本文介绍了一种使用CSS实现自定义滚动条的方法。通过设置::-webkit-scrollbar等伪元素, 可以调整滚动条的宽度和颜色, 适用于网页中各种元素。此方案能够提升用户体验, 并增强网站的美观度。

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

整个页面的多个块都可以使用这个自定义滚动条

*::-webkit-scrollbar {
  width: 3px;
  background-color: #eee;
}

*::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;

  &:hover {
    background-color: #a8a8a8;
  }

  &:active {
    background-color: #787878;
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #eee;
}``