wake-up-neo.net

Transparente Bildlaufleiste mit CSS

Verwenden Sie nun diesen Code (und viele Variationen davon), aber die Bildlaufspur erhält eine dunkelgraue Farbe, etwa # 222222 oder in der Nähe davon. Finden Sie viele Beispiele, aber alle geben das gleiche Ergebnis. Opera, Chrome und Firefox zeigen diesen Fehler. Wie repariert man? 

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: transparent;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}
16
user3260950

Mit pure css ist es nicht möglich, es transparent zu machen. Sie müssen ein transparentes Hintergrundbild wie folgt verwenden:

::-webkit-scrollbar-track-piece:start {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
11
Antihype Bird
    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll; // manage scrollbar content overflow settings
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px; // manage scrollbar width here
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent; // manage scrollbar background color here
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
    }
4
4dgaurav

Wenn Sie dies verwenden:

body {
    overflow: overlay;
}

Die Bildlaufleiste nimmt dann auch transparente Hintergründe auf der Seite auf. Dadurch wird auch die Bildlaufleiste in die Seite eingefügt, anstatt einen Teil der Breite zu entfernen, die in die Bildlaufleiste eingefügt werden soll.

Hier ist ein Demo-Code. Ich war nicht in der Lage, es in einen der Codepen oder Jsfiddle zu stecken, anscheinend dauerte es eine Weile, bis ich es herausgefunden hatte, aber sie zeigen nicht die Transparenz, und ich weiß nicht warum.

Aber das in eine HTML-Datei zu schreiben sollte gut gehen.

<!DOCTYPE html>
<html>
<style>
html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow: overlay;
}

.div1 {
  background: grey;
  margin-top: 200px;
  margin-bottom: 20px;
  height: 20px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
</style>

<body>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>


</body>
</html>

Sie können dies auch auf andere Elemente anwenden, z. B. auf ein beliebiges Bildlauffeld. Im Inspektormodus müssen Sie möglicherweise den Überlauf verbergen und dann wieder auf andere Elemente zurückgreifen. Es musste wahrscheinlich aktualisiert werden. Danach sollte es möglich sein, die Bildlaufleiste zu bearbeiten, ohne sie erneut aktualisieren zu müssen. Beachten Sie nur, dass dies für den Inspektor-Modus galt.

1
karl-police

Probieren Sie es aus, es funktioniert gut für mich.

In CSS:

::-webkit-scrollbar
{
    width: 0px;
}
::-webkit-scrollbar-track-piece
{
    background-color: transparent;
    -webkit-border-radius: 6px;
}

und hier ist die Arbeitsdemo: https://jsfiddle.net/qzsbf0tm/

Um den background-color der Bildlaufleiste zu steuern, müssen Sie das primäre Element anstelle von -track als Ziel festlegen.

::-webkit-scrollbar {
  background-color: blue;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

Ich habe es nicht geschafft, es transparent zu rendern, aber ich habe es geschafft, seine Farbe einzustellen.

Da dies auf das Webkit beschränkt ist, ist es immer noch vorzuziehen, js mit einer Polyfill zu verwenden: Angepasste Bildlaufleiste in div

1
vilsbole

Nur Anzeige einstellen: keine; als Attribut in Ihrem Stylesheet;) Es ist viel besser als das Laden von Bildern für nichts.

body::-webkit-scrollbar{
width:9px;height:9px;
}
body::-webkit-scrollbar-button:start:decrement,body::-webkit-scrollbar-button:end:increment{
display:block;height:0;background-color:transparent;
}
body::-webkit-scrollbar-track-piece{
background-color:#FFFFFF;
opacity:0.2;

> display:none;

-webkit-border-radius:0;
-webkit-border-bottom-right-radius:14px;
-webkit-border-bottom-left-radius:14px;
}
body::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:#333333;
-webkit-border-radius:8px;
}
0
Dice