Wie kann ich die Bildlaufleiste dazu bringen, div-Inhalte zu überlagern?
bereits versucht zu verwenden track mit transparentem Hintergrund, aber es funktioniert nicht
::-webkit-scrollbar-track {background: transparent}
bleibt gleich und nimmt einen Teil des Inhalts ein
.faq-body {
width: 250px;
height: 400px;
background: #fff;
overflow: scroll;
border: 1px solid #7b7d7f;
}
.faq-body::-webkit-scrollbar {
width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
background-color: #7b7d7f;
border: 5px solid #fff;
border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
position: absolute;
right: -3rem;
top: -50rem;
background: transparent;
}
.faq-question {
padding: 20px;
border-bottom: 1px solid #000;
line-height: 1.3;
color: #15191b;
font-size: 0.8rem;
}<div class="faq-body">
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
</div>
Kann mir jemand helfen?
Es gibt zwei Möglichkeiten, ein ähnliches Ergebnis zu erhalten:
Javascript-Bibliothek
Verwenden http://grsmto.github.io/simplebar/
https://jsfiddle.net/w0a5Ls6h/
Profi:
Browser-Kompatibilität
Zufriedenstellendes Ergebnis
Nachteile:
oder
Nur CSS
<style>
.faq-body {
width: 250px;
height: 400px;
background: #fff;
overflow-y: scroll;
border: 1px solid #7b7d7f;
}
.faq-body::-webkit-scrollbar {
width: 7px;
}
.faq-body::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.4);
border-radius: 10rem;
border: 1px solid #fff;
}
.faq-body::-webkit-scrollbar-track-piece:start {
background: transparent;
}
.faq-body::-webkit-scrollbar-track-piece:end {
background: transparent;
}
.faq-question {
padding: 20px;
border-bottom: 1px solid #000;
line-height: 1.3;
color: #15191b;
font-size: 0.8rem;
}
</style>
Nachteile:
Browser-Kompatibilität
Ähnliches Ergebnis, aber nicht zufriedenstellend
overflow: overlay Funktioniert in einigen Browsern (Chrome, Edge), jedoch nicht in Firefox. Angeblich scrollbar-gutter soll helfen, aber es sieht nicht so aus, als ob irgendein Browser dies bisher implementiert hätte.
Hier ist ein Hinweis auf die Browserunterstützung:https://caniuse.com/css-overflow-overlay
.faq-body {
width: 250px;
height: 400px;
background: #fff;
overflow-y: overlay;
border: 1px solid #7b7d7f;
}
.faq-body::-webkit-scrollbar {
width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
background-color: #7b7d7f;
border: 5px solid #fff;
border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
position: absolute;
right: -3rem;
top: -50rem;
background: transparent;
}
.faq-question {
padding: 20px;
border-bottom: 1px solid #000;
line-height: 1.3;
color: #15191b;
font-size: 0.8rem;
}<div class="faq-body">
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
<div class="faq-question">
Question
</div>
</div>
145277 0 0 cookie-check So erstellen Sie eine Bildlaufleiste, die den Inhalt überlagert yes 
Benötigen Sie eine benutzerdefinierte oder Standard-Bildlaufleiste?
– Vitor Avanço
10. September 2019 um 1:29
@VitorAvanço benutzerdefinierte Bildlaufleiste innerhalb eines Div, die den Inhalt überschreibt, wie im Bild wie in meiner Frage. Sou brasileiro também 😉
– Yung Silva
10. September 2019 um 1:33
Ich habe versucht, dies mit einem Iframe zu erreichen, hatte aber kein Glück.
– Nikolai Ehrhardt
2. Mai 2021 um 14:08