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