Question

这里几乎没有问过相同的问题，但他们的解决方案对我不起作用。

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

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

[更新]：小提琴展示它现在的样子，画面就是我想要的。

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;更改为您想要的任何颜色。您可能需要使其与您身体的背景颜色相似或将其设置为透明。

这是一个演示它的JS小提琴。

Solution

使滚动条跟踪透明

1 个答案: