Bei Flyouts oder Lightboxen die das Page Scrollen unterbinden

body.overlay {overflow: hidden;}

tritt im Desktop häufig das Problem auf, dass durch die verschwindene Scrollbar alle Inhalte der Seite etwas nach rechts rutschen.

TL;DR

Mit body { width: 100vw; overflow-x: hidden;} nimmt die Seite auch den Platz hinter der Scrollbar ein, während sie bei body { width: 100%; } nur vom linken Rand bis zur Scrollbar dimensioniert ist.

Das liegt daran, dass die Scrollbar z.B. 15px der Seite einnimmt und diese 15px dann freigibt.

Auffällig wird dieses zum Beispiel bei Seiten die ihren Inhalt ab einer gewissen Browserbreite horizontal zentrieren und der Menü Button unter der Maus verrutscht.

Nun hatte ich ein Javascript gefunden, welches mir die Breite der Scrollbar ausgibt, im Linux Chromium die oben genannten 15px, auf Windows Chrome 17px – ungerade Zahlen, im Edge 12px…

Das Javascript im Beitragsbild ist zum großen Teil die Lösung von David Walsh.

Meine erste Idee war die Hälfte der Scrollbar als horizontales padding auf den body zu addieren

body.overlay { overflow: hidden: padding: 0 7.5px;}.

Der arme Browser verschiebt also alles um 7.5 Pixel und muss alles neu rendern. Mit

body.overlay { overflow: hidden; transform: translateX(-7.5px); }

erspart man dem Browser das neu rendern, aber trotzdem verschiebt sich sichtbar alles um 0.5 Pixel.

Die Problemstellung

In meinem Szenario habe ich dem body { width: 100%; } gegeben, und um manche Inhalte ein .container { max-width: 1440px; margin: 0 auto; padding: 0 20px; } gesetzt, da die Hauptinhalte mittig zentriert dargestellt werden sollen, manche Elemente aber auch die komplette Breite einnehmen dürfen.

Beim Flyout oder einer Lightbox wird dann die Klasse .overlay { overflow: hidden; } auf dem body gesetzt, mit dem Effekt, dass ab 1440px Breite alle Inhalte einen Ruck nach rechts gemacht haben, und bei kleineren Auflösungen Inhalte am rechten Rand gezuckt haben.

Alles nicht so schön.

Die Lösung

Nach viel Probieren, habe ich durch Zufall die Breite auf 100vw gesetzt

body { width: 100vw; overflow-x: hidden;}

Dabei musste ich feststellen, dass die Seite dann hinter der Scrollbar weiter gezeichnet wird.

In meinem Anwendungsfall bedeutet dies, dass beim Klick auf den Menü Button, der Button seine Position nicht verändert, genauso wie sich auch sonst auf der Webseite nichts verschiebt oder zuckt – ich bin dem App Feeling auf dem Desktop also ein Stück näher! Yeah