由于移动设备上的底栏，滚动时整页固定背景跳转

Question

我知道这是一个众所周知的问题，互联网上有很多答案，但经过 2 天的研究，我仍然找不到解决方案。 我想要的是一个整页的固定背景，上面有内容。 问题是当我们向下滚动时，底部栏会消失，留下一个空白区域，然后调整背景大小，给用户带来不愉快的跳跃。 以下是一些我在 iOS 上尝试过但不起作用的示例（我只有一部 iPhone 可供使用）。

天真的解决方案

CSS

body {
    background: url("path");
    background-attachment: fixed;
    width:100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

根本没有跳跃，但是背景没有被覆盖也没有居中

然后我了解到移动设备严重支持背景附件固定，所以我做了以下

HTML

<body>
    <div id="bg"></div>
    CONTENT...
</body>

CSS

#bg {
    background: url("path");
    position:fixed;
    width:100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

背景居中并被很好地覆盖，但由于底部栏，我们在滚动时会出现一点跳跃

然后我用 body:before 读了一个小技巧（背景：固定不重复不能在移动设备上工作）

滚动时我们会跳转

我还尝试了不同的库（ https://www.jquery-backstretch.com ）

和上面一样的问题

javascript 的其他一些技巧（ https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ）（地址栏隐藏 iOS/Android/Mobile Chrome 时背景图像跳转）

和上面一样的问题

也许还有一些我忘记的技巧。 然而，这些技巧中的大多数可以追溯到 5 年，有时甚至更久。 我希望我错过了一些东西，今天我们终于找到了解决这个问题的办法。 任何带有 javascript 的解决方案都受到欢迎，甚至是库。

这是我想要的示例（ https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php ）。 但是，这个技巧不起作用，我们也得到了跳跃。

感谢您对未来的帮助！

Answer 1

最后，我找到了解决方案，这是我的解决方案。

HTML

<body>
    <div id="bg"></div>
    CONTENT...
</body>

CSS

#bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    transform: scale(1.0); 
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("path");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

Answer 2

这可以是没有固定背景 div 的选项之一。

 body { background: url('https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg'); no-repeat; background-size: cover; height: 220vh; } div { position: absolute; border: 2px solid white; background-color: white; width: 40vw; height:min-content; display: inline-block; left: 25%; padding: 5vh 5vh 0vw 5vw; text-align: left; font-size: 4vh; top: 10vh; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas, Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet. ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra, Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet. wisi, Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci. sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis, Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue. eu vulputate magna eros eu erat. Aliquam erat volutpat, Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus. metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas, Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet. ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra, Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet. wisi, Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci. sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis, Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue. eu vulputate magna eros eu erat. Aliquam erat volutpat, Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> </div> </body> </html>

由于移动设备上的底栏，滚动时整页固定背景跳转

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-05-14 19:38:12

解决方案2
0

由于移动设备上的底栏，滚动时整页固定背景跳转

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-05-14 19:38:12

解决方案2 0

解决方案1
1 已采纳 2020-05-14 19:38:12

解决方案2
0