verwenden übergang auf ::-webkit-scrollbar?
ist es möglich, übergänge auf webkit-scrollbars?
Ich habe versucht:
div#main::-webkit-scrollbar-thumb {
background: rgba(255,204,102,0.25);
-webkit-transition: background 1s;
transition: background 1s;
}
div#main:hover::-webkit-scrollbar-thumb {
background: rgba(255,204,102,1);
}
aber es funktioniert nicht.
Oder ist es möglich, erstellen Sie einen ähnlichen Effekt (ohne javascript)?
Hier ein jsfiddle zeigt die rgba-übergang problem
- Ich glaube nicht, dass es möglich ist.. Scrollbars sind notorisch schwer zu Stil..
InformationsquelleAutor Busti | 2013-10-07
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist es relativ einfach zu erreichen mit Mari M ' s
background-color: inherit;
Technik zusätzlich mit-webkit-background-clip: text;
.Live-demo; https://jsfiddle.net/s10f04du/
Hier ist eine weitere Idee, basierend auf die Antworten hier. Sie können die Verwendung von Farbe anstelle von background-color und dann box-shadow zum Kolorieren der thumb (man kann auch hack text-shadow für Spaß wie ich hatte, offensichtlich nicht eine Produktion-ready-Ansatz, aber können Sie nur überschreiben Sie Farbe in untergeordneten container):
https://codepen.io/waterplea/pen/dVMopv
Kurze Antwort: Nein, es ist nicht möglich
transition
auf eine::-webkit-scrollbar
Lange Antwort: Es gibt Mittel, um einen ähnlichen Effekt erzielen komplett in CSS.
Erklärung:
background-color
Eigenschaft. Diese Eigenschaft stimmt mit der Farbe, die wir wollen, um den übergang für die scrollbar.background-color
Masken, dass der äußere Behälter.background-color
Erben des äußeren Containers.transition
Eigenschaft wird angewendet, um diebackground-color
des äußeren Containers.Einen großen Nachteil hier ist, dass Sie haben zu tun, einige der Maskierung. Dies kann ein bisschen ein Streit sein, wenn dein hintergrund nicht einfarbig ist, da der innere container wird am ehesten übereinstimmen müssen. Wenn das nicht eine Sorge, dies für Sie zu arbeiten. Hier der code, um es alle zusammen für eine Seite mit einem horizontal scrollen Komponente.
HTML
CSS
Hinweise:
max-width
zu entsprechen, wird was auch immer Ihr innerer containerwidth
ist, andernfalls sehen Sie möglicherweise einige Eigentümlichkeiten auf sehr großen displays. Dies ist ein Grenzfall, in dem der browser die Breite größer ist als die horizontal-scrolling-content-Breite. Dies wird vorausgesetzt, Sie verwenden eine horizontale scrollen, wie das Beispiel der code funktioniert.Angepasst @brillout Antwort, wenn wir den übergang der
border-color
stattbackground-color
können wir vermeiden, mitbackground-clip: text
, die Blätter einige Fragmente hinter sich, wenn Sie irgendwelche verschachtelten text.Vollständige Erklärung:
border-color
auf Ihre wrapper-ändern Sie die Farbe auf hover.border-color: inherit
auf Ihre Bildlaufleiste.Wenn wir nun den Mauszeiger über die Hülle, die Grenze Farbe für den übergang. Der wrapper nicht über eine Grenze, damit wir nicht sehen, was passiert. Aber die scrollbar ist zu Erben, dass die Farbe, also die scrollbar Farbe ändert.
Hier ist der wichtigste code. Ein komplettes Beispiel ist in diese Geige und das snippet unten.
CSS:
HTML:
Gibt es eine ganze Menge, die Sie tun können, um Stil der scroll-Leiste:
Aber leider glaube ich, dass Sie nicht tun, was Sie Fragen.
JSFiddle