修改滚动条样式（亲测好用）

最新推荐文章于 2026-04-22 15:55:44 发布

原创最新推荐文章于 2026-04-22 15:55:44 发布 · 593 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

本文详细解释了如何使用CSS在Webkit浏览器中自定义滚动条的外观，包括宽度、颜色和交互效果，如鼠标悬停和激活状态的改变。

::-webkit-scrollbar {
  width: 2px;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #999;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #666;
}
::-webkit-scrollbar-thumb:vertical:active {
  background-color: #333;
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

标签