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 beibody { 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