Jumping Scrollbar Issue

When the scrollbar appears, the space for the web-page gets narrower. This causes a move or squeeze of the contents. There are several CSS workarounds to face this issue.

Classic Fix

html {
    overflow-y: scroll;
}

Source: css-tricks.com

Aligning Centered Pages

Adding margin on the left to compensate scrollbar on the right.

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Source: aykevl.nl

Let Scrollbar Overlap

Moves the page with the size of the scrollbar below the scrollbar. This is imho the nicest solution - but causes problems due to the overflow-x:hidden.

html {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

Source: Stackoverflow.com

Leave the Space blank

According to textfixer.com a common Windows browser scrollbar has the width of 17px. On my Debian the Firefox scrollbar width is 12px. The following code will leave 17px blank, when there is no scrollbar.

html {
    padding-right: calc(17px - (100vw - 100%));
}