如何使容器内的彩色横幅在透明滚动条下方延伸？
我想使用一个部分透明的自定义滚动条，这样您就可以看到它背后的任何背景。在可滚动内容中有不同颜色的横幅。下面的示例代码显示了这些横幅一直延伸到滚动条，然后停止，留下透明的滚动条来显示容器的背景色，这使得滚动条的整个透明效果有点难看。如何将这些横幅扩展到滚动条下方？
#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>最佳答案
最终我找到了解决方案。
如果滚动的是 body 标签，则每个背景条的宽度可以设置为 100vw(包括滚动条的窗口宽度)，然后可以在 body 标签上设置 overflow-x: hidden 以删除水平滚动条。
这个解决方案似乎只有在滚动的是主体时才有效。任何其他带有 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>
关于html - 在滚动条后面扩展一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44317878/