在滚动条后面扩展一个元素

Question

如何使容器内的彩色横幅在透明滚动条下方延伸？

我想使用部分透明的自定义滚动条，这样您就可以看到它背后的任何背景。在可滚动内容中有不同颜色的横幅。下面的示例代码显示了这些横幅一直延伸到滚动条，然后停止，留下透明的滚动条来显示容器的背景色，这使得滚动条的整个透明效果有点难看。如何将这些横幅扩展到滚动条下方？

#container {
  width: 300px;
  height: 200px;
  overflow-y: auto;
  background: black;
}

#banner1, #banner2 {
  width: 100%;
  height: 150px;
}

#banner1 {background: red}
#banner2 {background: yellow}


/* Creates a transparent scrollbar */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0,0,0,0);
  background-clip: padding-box;
  background-color: rgba(255,255,255,0.3);
}

<div id='container'>
  <div id='banner1'></div>
  <div id='banner2'></div>
</div>

Answer 1

最终我找到了解决方案。

如果滚动的是 body 标签，则每个背景条的宽度可以设置为 100vw（window 的宽度，包括滚动条），然后可以设置 overflow-x: hidden删除水平滚动条的 body 标签。

这个解决方案似乎只有在滚动的是正文时才有效。任何其他带有 overflow-x: hidden 的 div 都会使滚动条下方的任何内容消失，无论出于何种原因，body 标签都不会发生这种情况。

示例 html 文件：

<!doctype HTML>
<html>
  <body>
    <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    body {
      margin: 0;
      overflow-x: hidden;
    }

    #banner1, #banner2 {
      width: 100vw;
      height: 75%;
    }

    #banner1 {background: red}
    #banner2 {background: yellow}

    /* Creates a transparent scrollbar */
    ::-webkit-scrollbar {
      width: 16px;
    }
    ::-webkit-scrollbar-thumb {
      border: 4px solid rgba(0,0,0,0);
      background-clip: padding-box;
      background-color: rgba(255,255,255,0.5);
    }
    </style>
    <div id='banner1'></div>
    <div id='banner2'></div>
  </body> 
</html>

View this screenshot of the page working correctly.

在滚动条后面扩展一个元素

Extend an element behind a scrollbar

html

css

scrollbar

transparent