スクロールバーの背後にある要素を拡張する

透明なスクロールバーの下にあるコンテナ内の色付きバナーを作成するにはどうすればよいですか？スクロールバーの背後にある要素を拡張する

部分的に透明なカスタムスクロールバーを使用して、背後にある背景を見てみましょう。スクロール可能なコンテンツの中には、異なる色のバナーがあります。以下のサンプルコードでは、スクロールバーまで伸びたバナーを表示して停止し、透明なスクロールバーにコンテナの背景色を表示して、スクロールバーの透明な効果全体を醜いものにしています。これらのバナーをスクロールバーの下にどのように延長できますか？

#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

スクロールバーの背後にある要素を拡張する

答えて

関連する問題