CSS -Techniken zur Manipulation von Scrollbar -Position

In der Webentwicklung können die Position von Scrollbars die Benutzererfahrung verbessern und die gewünschten Designästhetik erreichen. Während native CSS -Funktionen nicht direkt die vollständige Kontrolle über die Platzierung von Scrollbar bieten, gibt es kreative Techniken, um die Positionsanpassungen zu simulieren. Lassen Sie uns mit zwei solchen Methoden eintauchen:

1. Rechts/links Scrollbar Flip:

Um die Bildlaufleiste von links nach rechts neu zu positionieren, stellt CSS die Richtungseigenschaft vor. Durch Einstellen der Richtung: RTL (rechts nach links) im übergeordneten Element wird die Bildlaufleiste effektiv auf die gegenüberliegende Seite umgedreht. Es ist jedoch wichtig zu beachten, dass dies auch die Textrichtung des Inhalts umkehrt. Um dem entgegenzuwirken, kann der untergeordnete Inhalt auf Richtung eingestellt werden: LTR (links nach rechts), um seinen beabsichtigten Fluss zu erhalten.

2. Top/Bottom Scrollbar Flip:

Um die Bildlaufleiste von oben nach unten zu drehen, verwendet CSS eine Kombination von Transformationen und Rotationen. Durch die Anwendung einer 180 ° -Drotation entlang der x-Achse unter Verwendung der Transformationseigenschaft werden das übergeordnete Element und sein untergeordneter Gehalt effektiv auf den Kopf gestellt. Diese Technik erstellt die Illusion einer vertikal geflippten Scrollbar, während die richtige Textanweisung beibehält. Höhe: 200px; Überlauf-X: Auto; } .Inhalt { Höhe: 300px; } .Fliped { Richtung: RTL; } .Fliped .Content { Richtung: LTR; }

top/bottom Flip Demo:

. Container { Breite: 200px; Überlauf-y: Auto; } .Inhalt { Breite: 300px; } .Fliped, .Fliped .Content { Transformation: rotatex (180 Grad); -ms-transform: rotatex (180 °); / * Dh 9 *//// -Webkit-transform: rotatex (180 °); / * Safari und Chrom *// }