Stop background shifting when switching between pages with/without scrollbars?

Question

I have a static page that has no scroll bar. It links to another page that has a scroll bar. Both pages share the same background image. When I switch back and forth, I can notice the background image and page content shift slightly to the left due to the scrollbar being displayed on one page and not on the other.

I fixed this by doing this trick, but it only works for the body content. The background image still shifts. Is there anyway to fix this? I have one fix ( overflow-y:scroll; ), which is always displaying the scrollbar, even when there is nothing to scroll, but it's not ideal.

My BG image code is:

body {
background: url(img.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

As of today I have — not — heard of any other than always setting the scroll-bar. — deEr.
You can use this plugin: manos.malihu.gr/jquery-custom-content-scroller — Chiller

ICE ICE · Accepted Answer · 2018-03-25T14:08:24

First disable body scrolling. you can have background there:

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: url('img.png') no-repeat center;
    background-size: cover;
}

create a wrapper inside body like this:

<body>
   <div class="body">
     PAGE CONTENT
   </div>
</body>

now style that wrapper like this:

.body {
    height: 100vh; 
    overflow: auto;
    box-sizing: border-box;
    padding: 5px;
}

Now you see the background does not change with or without scroll.

Stop background shifting when switching between pages with/without scrollbars?

1 Answers