Skip to main content

Scrollbar Jump Fix

If you move from one page of a site without a scrollbar to another with a scrollbar, you’ll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar.

A classic fix was html { overflow-y: scroll; } to force the scrollbar all the time. Ayke van Laëthem has found a more elegant solution in html { margin-left: calc(100vw - 100%); } which works because vw accounts for the scrollbar and % doesn’t, and… just read it as there are a few more things you’ll need to be aware of anyway.

 
html {
    overflow-y: scroll;
}
 
html {
    margin-left: calc(100vw - 100%);
}

Hinweis: Um die Breite der Scrollbar auf diese Weise durchzuführen, muss das entsprechende Element den automatischen Überlauf gesetzt haben:

overflow: auto;.