扩展滚动条后面的元素

如何在透明滚动条下面的容器内部制作彩色横幅？扩展滚动条后面的元素

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

#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>

来源

2017-06-01 Scotty Jamison

我终于找到了解决办法。

如果是滚动的主体标签，每个背景条的宽度可以设置为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>

View this screenshot of the page working correctly.

来源

2017-08-08 21:23:12

扩展滚动条后面的元素

回答

相关问题