Stießen Sie Ihre Sachen mit einer benutzerdefinierten Bildlaufleiste

Meine erste Begegnung mit einer wirklich faszinierenden Scrollbar war auf dieser Website. Der Start von CSS-Tricks V17 mit seiner unglaublich mutigen und visuell auffälligen Scrollbar hinterließ einen bleibenden Eindruck.

Ich war erstaunt. Könnte ein solches Designelement - eine Scrollbar! - auf einer professionellen Website so wirkungsvoll sein? Der subtile Gradient, die großzügigen Kurven, der nahtlos gemischte Hintergrund und die schiere zufriedenstellende Dicke - es war eine gewagte und innovative Designauswahl. Die taktile Anziehungskraft der Scrollbar war unbestreitbar; Es lud die Interaktion ein, einfach sein visuelles Gewicht zu schätzen. Es war mutig, avantgardistisch und herrlich zugänglich, die bei älteren Browsern sogar anmutig erniedrigte.

Während die aktuelle CSS -Tricks -Scrollbar raffinierter und zurückhaltender ist - ein gedämpftes Hellgrau auf Schwarz -, behält es seine Markenidentität immer noch bei und zeigt subtile Auswirkungen auf die Gradienteneffekte. Es ist jedoch weniger ablenkend, um sicherzustellen, dass es das Leseerlebnis nicht beeinträchtigt. In unserer effizienzgetriebenen Welt, Priorisierung von MVPs und der 80/20-Regel, stellen benutzerdefinierte Scrollbars echte Handwerkskunst dar. Sie kommunizieren eine Ebene von Liebe zum Detail, die Wörter einfach nicht vermitteln können.

Die Standardisierungsbemühungen (mit mehr im Einklang) haben die API vereinfacht: sieben Pseudo-Elemente und elf Pseudoklassen zielen praktisch auf jeden Aspekt und den Zustand der Scrollbar. Während dies umfangreich klingt, reicht das Mastering nur drei für eine beeindruckende Anpassung aus:

 <code>body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - ideal for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the draggable element—the star of the show! */ }</code>

Diese funktionieren wie jedes andere ausgewählte Element, das die Anwendung verschiedener CSS -Techniken ermöglicht. Medienabfragen, Hintergrundgradienten, Transparenz und Margen (unter Verwendung verschiedener CSS -Einheiten) funktionieren alle effektiv. (Es ist jedoch nicht alles möglich; ich würde gerne Cursor auf Scrollbars für ein echtes Retro -Gefühl stylen). Das Experimentieren mit Lea Verous CSS -Hintergrundgradienten führte zu einem eher unkonventionellen, wenn auch personalisierten Scrollbar -Design - einem gestreiften Friseurstab für Daumen und transparente Herzen für die Strecke. Es war unbestreitbar einzigartig und verdiente den Spitznamen "Swyxbar" an meinem Arbeitsplatz, nachdem ich eine subtilere Version implementiert hatte.

Jeder Front-End-Entwickler sollte die Grenzen der Bildlaufleistenanpassung mindestens einmal überschreiten. Es ist jedoch entscheidend, zu vermeiden, dass Scrollbars erstellt werden, die den Erwartungen der Benutzer widersprechen, insbesondere in weit verbreiteten Produkten (wie Google Wave demonstrierte).

Das obige ist der detaillierte Inhalt vonStießen Sie Ihre Sachen mit einer benutzerdefinierten Bildlaufleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!