overflow滚动条css样式

最新推荐文章于 2025-09-15 11:47:20 发布

原创最新推荐文章于 2025-09-15 11:47:20 发布 · 4.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条 #css #overflow

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现的自定义滚动条样式方法。通过WebKit特定的伪元素选择器，可以调整滚动条的宽度、高度及轨道和滑块的样式，包括圆角、边框、阴影等效果。

滚动条样式效果图

滚动条样式 css 代码


::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}