Eine „neue Richtung“ im Kampf gegen das Scrollen nach rechts

Avatar of Chris Coyier
Chris Coyier am

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

Kennen Sie diese Situationen, in denen Sie eine horizontale Scrollleiste erhalten, wenn Sie versehentlich ein Element über den rechten Rand des Browserfensters hinaus platzieren? Das kann ein einblendbares Menü oder Ähnliches sein. Manchmal verwenden wir overflow-x: hidden; für den Body, um das zu beheben, aber das kann manchmal Dinge wie position: sticky; zerstören.

Nun, wissen Sie, wenn Sie ein Element über den *linken* Rand eines Browserfensters hinaus platzieren, passiert das nicht? Das ist „Datenverlust“ und einfach die Art und Weise, wie die Dinge hier funktionieren. Das hat tatsächlich mit der direction der Seite zu tun. Wenn Sie sich in einer RTL-Situation befinden würden, wäre es der linke Rand des Browserfensters, der die Überlaufsituation verursacht, und der rechte Rand, wo dies nicht der Fall ist.

Emerson Loustau nutzt diese Idee, um hier ein Problem zu lösen. Ich wäre viel zu nervös, um mit direction so herumzuspielen, weil ich einfach nicht weiß, welche Nebenwirkungen es hätte. Aber hey, zumindest bricht es position: sticky; nicht.

Direkter Link →