如何向 ::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%;
}