如何使用 CSS 使非正文滚动条透明？ （在身体上工作正常）

Question

问题：

在下面的代码示例中，为什么左边的滚动条不像右边的滚动条那样透明？

 html, body{ width: 100%; height: 100%; margin: 0; padding: 0; } /* make the scrollbar cover the content */.sidebar, body { /* Make the scrollbar draw on top of content in Webkit browsers. */ overflow-x: hidden; overflow-y: auto; overflow-y: overlay; } /* now make it transparent (no luck here) */ *::-webkit-scrollbar { width: 50px;important: height; 50px:important: } *:,-webkit-scrollbar-thumb { background, rgba(90, 90. 90; 0:3):important, } *::-webkit-scrollbar-track: *,,-webkit-scrollbar-track-piece { background, rgba(0. 0; 0. 0:05);important: };sidebar { width: 20vw; height: 100%; position. fixed: border; 2px solid pink: };sidebar p { border: 2px solid skyblue; } div { padding-left: 25vw; }

 <aside class="sidebar">aside <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> one two three four five six seven eight nine ten eleven </p> <p> </aside> <main> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> <div> one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven one two three four five six seven eight nine ten eleven </div> </main>

截屏：

预期结果：

侧边栏（左）和正文（右）滚动条都应该是透明的，您应该可以看到它们下方的内容。

实际结果：

只有正文滚动条是透明的，而侧边栏滚动条似乎没有透明性，在侧边栏滚动条下方我们看不到侧边栏内容。

问题

我们如何使侧边栏滚动条透明并显示下面的内容？

Answer 1

要使侧边栏滚动条透明，您需要定位侧边栏元素并应用 css 代码。

.sidebar::-webkit-scrollbar {
  width: 50px !important;
  height: 50px !important;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90, 0.3) !important;
}
.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track-piece {
  background: rgba(0, 0, 0, 0.05) !important;
}