通过 CSS 来重写滚动条的样式

4 min read

要重写滚动条的样式,可以使用 CSS 的 scrollbar 相关属性。

例如,以下代码可以将浏览器默认的滚动条样式改成自定义样式:

/* 将滚动条的基本样式设为透明 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background-color: #F5F5F5;
  border-radius: 4px;
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 4px;
}

/* 当用户悬停在滚动条上时,设置滑块的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这段代码使用了 CSS3 的伪元素语法,以及 WebKit 特有的 scrollbar 相关的属性,比如 ::-webkit-scrollbar

可以根据自己的需求来修改这些 CSS,比如调整滑块的大小、颜色、边框等。