html - 自定义水平滚动条 - 如何？

Question

我尝试在 div 中创建水平的自定义滚动条。我会得到这样的效果:

我的尝试:

我用了::-webkit-scrollbar 等，但我不知道如何制作大按钮。

我的问题:

如何制作像1号图那样的滚动条？

Answer 1

我唯一能弄清楚的方法是伪造厚度差异。似乎不可能专门使 handle 比轨道更宽或更高。但是您可以使用颜色和透明度来伪造效果。

* {
  box-sizing: border-box;
}
body {
  background: black;
}
div {
  margin: 40px auto;
  height: 100px;
  width: 400px;
  overflow-x: scroll;
}
span{
  width: 1000px;
  display: block;
  height: 40px;
}
div::-webkit-scrollbar {
  height: 10px;
  background: rgba(0,0,0,0);
}
div::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 1);
  background: rgba(255, 255, 255, 0.3);
}
div::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

<div>
  <span></span>
</div>