Transparente Bildlaufleiste mit CSS

Jetzt verwenden Sie diesen Code (und viele Variationen davon), aber Scroll-Track bekommen dunkelgraue Farbe, etwas wie # 222222 oder in der Nähe von diesem. Finde viele Beispiele, aber alle geben das gleiche Ergebnis. Opera, Chrome und Firefox zeigen diesen Fehler. Wie repariert man?Transparente Bildlaufleiste mit CSS

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

Quelle

2014-04-21 user3260950

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

Quelle

2014-04-21 15:50:08 4dgaurav

jetzt - nur Standard-Scrollbar. – user3260950

okies .., ich habe es, Sie müssen eine feste Höhe Element in Ihrer Seite haben Blick auf diese Geige für die Demo http://jsfiddle.net/4dgaurav/F9p7S/64/ – 4dgaurav

Ja, ich weiß über diese Vorlage, aber Kann Fehler in meiner ersten Sektion nicht finden. Irgendwelche Ideen? – user3260950

versuchen diese, ist es für mich gut funktioniert.

In CSS:

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

und hier ist die Arbeits Demo: https://jsfiddle.net/qzsbf0tm/

Quelle

2015-10-18 18:21:52

Die Hintergrundfarbe wird nicht angewendet. Der Grund, warum es "unsichtbar" ist, liegt an der Breite. Ich weiß das, weil ich versucht habe, die Hintergrundfarbe auf transparent zu setzen, und es funktioniert nicht, plus die falsch geschriebene "Farbe" in deiner Geige. : D – sinrise

Mit reinem css es nicht möglich ist, es transparent zu machen. Sie haben wie diese transparente Hintergrundbild zu 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; 
}

Quelle

2015-11-13 05:37:35

Dies ist die erste genaue Aussage über Hintergrundfarben auf Spuren. So viele Beispiele von Leuten, die annehmen, dass es funktioniert, ohne es tatsächlich zu testen. Vielen Dank! – sinrise

Um die background-color der Scrollbar steuern Sie das primäre Element zum Ziel benötigen, statt -track

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

ich nicht machen es gelingen haben transparent, aber ich habe es geschafft, seine Farbe einzustellen.

Da dies zu webkit begrenzt ist, ist es immer noch besser js mit einem polyfill zu verwenden: CSS customized scroll bar in div

Quelle

2016-11-29 12:18:53 vilsbole

Transparente Bildlaufleiste mit CSS

Antwort

Verwandte Themen