如何用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;
}