浏览器滑动条样式美化

在网页开发过程中难免会有内容过多需要滚动的时候，但是浏览器默认的滚动条样式不够美观，使用overflow:hidden去隐藏滚动条又将导致内容不可滚动。以往我以为那些自定义滚动条样式的网页都是通过自己开发定义行为、实现样式等一系列复杂的操作来达到自定义滚动条的效果。但是今天发现可以通过伪元素来轻松实现。

为需要滚动的元素添加如下样式:

::-webkit-scrollbar {
  width: 10px;
  height: 8px;
  backgroundcolor: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

添加后效果：

PS：对纵向滚动条和横向滚动条都有效。

• 本文作者： Kylin
• 本文链接： https://kylinnnnn.github.io/2022/06/04/浏览器滑动条样式美化/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！