如何为 ::webkit-scrollbar-thumb 添加左右填充？

Question

有没有办法复制 YouTube 的自定义滚动条？

想要的效果：

似乎 ::webkit-scrollbar-thumb 有一个左右填充来实现这种效果。

我试过以下方法：

* {
  margin: 0;
  padding: 0;
  ::-webkit-scrollbar {
    background: #181818;
    width: 12px;
  }
  ::-webkit-scrollbar-thumb {
    padding: 0 4px; // This was supposed to do the trick
    background: #909090;
    border-radius: 100px;
    &:hover {
      background: #606060;
    }
  }
}

但是不行...

结果：

有什么想法可以达到预期的效果吗？ 提前致谢。

Answer 1

您可以尝试使用 background-clip: padding-box 伪造填充并应用透明的左右边框。

::-webkit-scrollbar {
  background: #181818;
  width: 20px;
}

 ::-webkit-scrollbar-thumb {
  padding: 0 4px;
  border-right:4px solid transparent;
  border-left:4px solid transparent;
  background: #909090;
  background-clip: padding-box;
  border-radius: 100px;
  &:hover {
    background: #606060;
  }
}

html,
body {
  height: 300%;
}

如何为 ::webkit-scrollbar-thumb 添加左右填充？

How to add left and right padding to ::webkit-scrollbar-thumb?

html

css

sass

scrollbar