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.