Preface

定制网页滚动条样式是很常见的业务需求。

Analysis

众所周知：

Show Code

通过以下样式，可以将滚动条魔改成上述图中的样子：

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 0.28);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background-color: rgba(50, 50, 50, 0.06);
}
::-webkit-scrollbar-corner {
  background-color: rgba(50, 50, 50, 0.06);
}

其中需要注意的是，thumb 的宽度是无法设置的，为了实现 thumb 悬浮的效果，为 thumb 设置了透明的 border。而默认的 background-clip 是 border-box 的，这意味着背景会蔓延到边框下，这样同样是无法呈现悬浮效果的，于是将其设置成为 content-box 限制背景区域仅为内容区。

Reference

• background-clip