Das erste Mal, dass mir eine bescheidene Scrollleiste den Atem raubte, war auf dieser Website. Als CSS-Tricks v17 eingeführt wurde mit seinem FETTEN CHONKY BOI, klappte mir die Kinnlade herunter.
Ich wusste nicht, dass man so etwas auf einer professionellen Website machen kann. Und dass es… gut aussehen würde?!
Ich schätzte so viel daran – den sanften Farbverlauf, die rücksichtslose Rundung, den gemischten Hintergrund, die schiere befriedigende CHONKINESS, die Sie dazu herausfordert, darauf zu klicken und sie hoch und runter zu wackeln, nur um ihre taktile Schwere zu bestaunen. Wie mutig! Wie avantgardistisch! Was für ein schlichtes, zugängliches, anmutig abfallendes Vergnügen!
Natürlich ist die aktuelle CSS Tricks Scrollleiste, weil Spaß nicht ewig währt, erwachsener und gedämpfter, hellgrau auf schwarz. Immer noch markengerecht, immer noch mit subtiler Farbverlauf-Muskelkraft, aber nicht so ablenkend, dass sie vom Leseerlebnis ablenkt. In unserer ultra-funktionalen Welt der MVPs und 80/20-Regeln, der Maximierung der Effizienz und der Produktivitätssteigerung, zeugen benutzerdefinierte Scrollleisten von etwas über Handwerkskunst. Sie sagen ohne Worte, was man in hundert nicht sagen kann.
Dank einiger Standardisierung (mit weiteren auf dem Weg) ist die API einfach: sieben Pseudo-Elemente und elf Pseudo-Klassen, die (fast) jede erdenkliche Komponente und jeden Zustand der vertrauenswürdigen (und oft übersehenen) Scrollleiste ansprechen. Klingt nach viel, aber mit nur drei davon können Sie sehr weit kommen
body::-webkit-scrollbar {
/* required - the "base" of the bar - mostly for setting width */
}
body::-webkit-scrollbar-track {
/* the "track" of the bar - great for customizing "background" colors */
}
body::-webkit-scrollbar-thumb {
/* the actual draggable element, the star of the show! */
}Von hier aus funktioniert es wie jedes andere ausgewählte Element. Bringen Sie also Ihre volle Tasche mit Ein-Div-CSS Tricks! Media Queries funktionieren! Hintergrundverläufe funktionieren! Transparenz funktioniert! Abstände mit allen Arten von CSS-Einheiten funktionieren! (Nicht alles funktioniert… Ich würde gerne cursor auf meinen Scrollleisten stylen für diesen authentischen GeoCities-Look). Ich habe es auf meiner Website ausprobiert mit Lea Verous Sammlung von CSS-Hintergrundverläufen (meine Sammlung von Sammlungen ist hier) und landete mit einer abscheulichen Kombination aus gestreiftem Barbierladen (💈) für das Thumb-Element und transparenten Herzen für die Spur. Aber es war definitiv mein eigenes – so sehr, dass die Leute es „swyxbar“ nannten, als ich eine subtilere Version bei der Arbeit implementierte.
Jeder Frontend-Entwickler sollte das mindestens einmal in seiner Karriere zu weit treiben. Lebe gefährlich! Brich die Regeln! Wüte gegen den User Agent! Und verschicken Sie vielleicht keine Scrollleisten, die die Erwartungen der Benutzer bei einem Massenmarktprodukt brechen (wie Google Wave es damals tat)!
Wenn ich mich recht erinnere, fehlt Firefox die Unterstützung dafür, aber sie unterstützen einen sehr alten IE-Standard, den Sie als Workaround verwenden können. Ein bisschen ungewöhnlich!
Nach meinem besten Wissen unterstützt Firefox tatsächlich nur die NEUEN standardisierten Eigenschaften für benutzerdefinierte Scrollleisten
https://css-tricks.de/the-current-state-of-styling-scrollbars/#an-updated-version-of-a-fairly-consistently-styled-scrollbar-across-firefox-safari-chrome
Oder vielleicht sogar eine schicke JavaScript-Scrollleiste: https://grsmto.github.io/simplebar/
Ich habe eine CSS-Komponente erstellt, die eine browserübergreifende Version erstellt https://fylgja.dev/components/scrollbar/ bis iOS die Unterstützung für
::-webkit-scrollbareingestellt hatEs ist lustig, dass so viele Browser immer noch die Webkit-Version unterstützen, aber ich hoffe, dass mehr die neuere Spezifikation unterstützen werden.
Wir sind wieder bei IE6 und den benutzerdefinierten Stilen für Scrollleisten, die jeder Kunde in den 2000er Jahren verlangte… und es war bereits eine schlechte Idee.
Oh, also weil etwas in der Vergangenheit schlecht ausgeführt wurde, bedeutet das, dass es in Zukunft nicht nützlich oder ordentlich sein kann? Ich glaube, neuere CSS-Funktionen können großartige benutzerdefinierte Scrollleisten erstellen, aus all den im Beitrag genannten Gründen (z. B. kann die „Chunkiness“ die Steuerung tatsächlich erleichtern). Die Idee pauschal abzulehnen, könnte bei dem richtigen Projekt eine verpasste Gelegenheit sein.
Die Antwort der Community damals (xhtml1.0 Trans-Pixel-Banner-fähige Open-Source-Community, es war vor Web2.0… ja, ich bin so alt) war: Warum etwas neu machen, das von 3 verschiedenen Zweigen von UI-Designern poliert wurde?
Ja, aber nochmals, der Punkt ist, das war damals (ich bin auch so alt) und das ist jetzt. Wir haben heute die Werkzeuge, um es effektiver zu tun. Nach dieser Logik könnten wir genauso gut nie UA-Styles überschreiben.
Ich weise nur darauf hin, dass dies angesprochen wurde. Versteh mich nicht falsch.
Ich liebe die Idee und spiele gerade damit.
Ich hatte einfach sooo Nostalgie.
(Und ich könnte das sogar mit meinen frühen Zeiten in Flash verbinden, als ich Scrollleisten baute…)
Ich kann das nur zu gut nachvollziehen! Teilen Sie auf jeden Fall, was Sie machen – ich würde es gerne sehen.