Question

我有一个没有滚动条的静态页面。它链接到另一个具有滚动条的页面。两个页面共享相同的背景图像。当我来回切换时，由于滚动条显示在一个页面而不是另一个页面上，我可以注意到背景图像和页面内容略微向左移动。

我通过执行this trick来修复此问题，但它仅适用于正文内容。背景图像仍在移动。有没有什么办法解决这一问题？我有一个修复（overflow-y：scroll;），它总是显示滚动条，即使没有可滚动的内容，但它并不理想。

我的BG图片代码是：

身体{
    background：url（img.png）无重复中心固定;
   -webkit-background-size：cover;
   -moz-background-size：cover;
   -o-background-size：cover;
   background-size：cover;
  }

Answer 1

首先禁用正文滚动。你可以在那里有背景：

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

在体内创建一个包装器，如下所示：

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

现在将这样的包装器设置为样式：

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

现在您看到无论有没有滚动，背景都不会改变。

在有/没有滚动条的页面之间切换时停止后台移位？

1 个答案: