Beschneiden von scrollbaren Bereichen auf der Inline-Startseite

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Auf einer Standard-Webseite von links nach rechts löst das "Aufhängen" eines Elements am rechten Rand der Seite (z. B. position: absolute; right: -100px;) eine horizontale Scrollleiste aus, die so weit scrollt, wie nötig ist, um dieses gesamte Element sichtbar zu machen. Hängt man jedoch ein Element am linken Rand der Seite auf, wird es einfach ausgeblendet (es wird keine Scrollleiste ausgelöst). Das nennt man in der CSS-Terminologie "Datenverlust", wenn man sich schick ausdrücken möchte. Dasselbe gilt für den oberen Rand der Seite (ausgeblendet) und den unteren Rand der Seite (es kommt zu einem Scrollen).

Ahmad bringt es auf den Punkt. Es ist nur eines dieser CSS-Dinge, die man einfach wissen muss. Ich liebe es, wie Ahmad logische Richtungen wie inline-start (und block-start) verwendet, um das Problem zu beschreiben, denn diese Richtungen *ändern* sich, wenn sich die Richtung oder der Schreibmodus der Seite ändern. Wenn die Seite von rechts nach links (RTL) gerichtet ist, wie z. B. <html dir="rtl">, dann sind die horizontalen Ränder, an denen der Datenverlust auftritt, vertauscht (außer in Firefox 🤷‍♀️).