scrollbar on browser and div margin 0 auto jumping

Question

i am using div#wrapper margin: 0 auto to center the div, there is scroll bar on this page however when it transition to second page where there is no scroll bar

Answer 1

Set html width to be equal viewport and turn off horizontal scroll to avoid appearing of horizontal scrollbar when vertical one will expand html.

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

Answer 2

Adding a calculated margin to your html tag will create a margin on the left equal to the scrollbar on the right if a scrollbar exists. This will stop the jumping.

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

Original Source

Answer 3

I've run into this a few times, the best thing I've found is to force a Y scroll-bar on every page, even if it isn't needed using in your style sheet:

html { overflow-y: scroll; }

This will mean there is always a right scroll bar on the page, but it will be enabled/disabled as needed, and prevent the jump.

Answer 4

If you don't want to force a Y scroll-bar on every page, you can calculate the margins using view-port width. This stopped the auto jumping for me.

@media (min-width: 960px) {
    .container {
        margin-left: calc(50vw - 480px);
        width: 960px;
    }
}