对于 chrome 浏览器，它提供了修改滚动条样式的接口，开发者只需要加上几句 css 脚本，就可轻松实现滚动条样式的修改.

先说一下滚动条的参数： ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式 /_ 设置滚动条的样式 / ::-webkit-scrollbar { width: 10px; } / 滚动槽 / ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } / 滚动条滑块 _/ ::-webkit-scrollbar-thumb { border-radius: 10px; background: #bbb; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-4);
  border-radius: 5px;
}
/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-6);
}