css - 使滚动条轨道透明

Question

这里很少有问题问同样的问题，但他们的解决方案对我不起作用。

这是其中一个问题的图片以及我想要实现的目标。我有一个列表，当有更多元素时，会显示滚动条。

我还将 overflow-y 设置为覆盖，因为我不希望滚动条增加到列表的宽度。如何使轨道透明以便可以看到下面的元素？

Track overlapping content

[更新]:摆弄一下现在的样子，图片就是我想要得到的。

p {
overflow-y: overlay;
width: 101%; }

https://jsfiddle.net/yk1cverh/2/

Answer 1

您可以在您的 CSS 代码中添加以下内容:

body::-webkit-scrollbar {
  width: 0.7em;
  background: white;
}
body::-webkit-scrollbar-thumb {
  background: #c0392b;
  height:30px;
}

body::-webkit-scrollbar-track-piece
{
   display:none;
}

这部分:

body::-webkit-scrollbar {
  width: 0.7em;
  background: white;
}

您可以将 background: white; 更改为您想要的任何颜色。您可能需要使其与您 body 的背景颜色相似或将其设置为透明。

这是一个演示它的 JS Fiddle。

https://jsfiddle.net/qzsbf0tm/687/