Erweitern eines Elements hinter einer Bildlaufleiste

Wie kann ich farbige Banner in einem Container unter einer transparenten Bildlaufleiste erweitern?Erweitern eines Elements hinter einer Bildlaufleiste

Ich möchte eine benutzerdefinierte Bildlaufleiste verwenden, die teilweise transparent ist, die Sie sehen können, welcher Hintergrund dahinter ist. Innerhalb des scrollbaren Inhalts befinden sich Banner mit unterschiedlichen Farben. Der folgende Beispielcode zeigt diese Banner, die sich bis zur Bildlaufleiste erstrecken und dann anhalten, wobei die transparente Bildlaufleiste die Hintergrundfarbe des Containers anzeigt, wodurch der gesamte transparente Effekt der Bildlaufleiste hässlich wird. Wie kann ich diese Banner unter der Bildlaufleiste erweitern?

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

Quelle

2017-06-01 Scotty Jamison

Schließlich fand ich eine Lösung.

Wenn das body-Tag scrollt, kann die Breite jedes Hintergrundstreifens auf 100vw gesetzt werden (die Breite des Fensters einschließlich der Bildlaufleisten). Dann kann overflow-x: hidden auf das zu entfernende body-Tag gesetzt werden die horizontale Bildlaufleiste.

Diese Lösung scheint nur zu funktionieren, wenn es der Körper ist, der das Scrollen macht. Jedes andere div mit overflow-x: hidden lässt alles verschwinden, was unter den scrollbars verschwindet, dies geschieht aus irgendeinem Grund nicht mit dem body-tag.

HTML-Beispieldatei:

<!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.

Quelle

2017-08-08 21:23:12

Erweitern eines Elements hinter einer Bildlaufleiste

Antwort

Verwandte Themen