Preface

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

Analysis

众所周知：

image.png

Show Code

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

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

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

Reference

• background-clip