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

Question

I know it is a well-known issue with plenty of answers on the internet but 2 days of research later I still don't find a solution.我知道这是一个众所周知的问题，互联网上有很多答案，但经过 2 天的研究，我仍然找不到解决方案。 What I want is a full-page fixed background with content above it.我想要的是一个整页的固定背景，上面有内容。 The issue is when we scroll down the bottom bar disappears leaving a white space then the background is resized creating an unpleasant jump for the user.问题是当我们向下滚动时，底部栏会消失，留下一个空白区域，然后调整背景大小，给用户带来不愉快的跳跃。 Here are some examples of what I tried and doesn't work on iOS (I only have an iPhone at my disposal).以下是一些我在 iOS 上尝试过但不起作用的示例（我只有一部 iPhone 可供使用）。

The naive solution天真的解决方案

CSS CSS

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

No jump at all, however the background is not covered nor centered根本没有跳跃，但是背景没有被覆盖也没有居中

I then learned background-attachment fixed is badly supported on mobile so I did the following然后我了解到移动设备严重支持背景附件固定，所以我做了以下

HTML HTML

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

CSS CSS

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

The background is well centered and covered but we get the little jump when scrolling because of the bottom bar背景居中并被很好地覆盖，但由于底部栏，我们在滚动时会出现一点跳跃

I then read a little trick with body:before ( background: fixed no repeat not working on mobile )然后我用 body:before 读了一个小技巧（背景：固定不重复不能在移动设备上工作）

We get a jump when scrolling滚动时我们会跳转

I also tried different libraries ( https://www.jquery-backstretch.com )我还尝试了不同的库（ https://www.jquery-backstretch.com ）

Same issue as above和上面一样的问题

Some other tricks with javascript ( https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ) ( Background image jumps when address bar hides iOS/Android/Mobile Chrome ) javascript 的其他一些技巧（ https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ）（地址栏隐藏 iOS/Android/Mobile Chrome 时背景图像跳转）

Same issue as above和上面一样的问题

And maybe some other tricks that I forgot.也许还有一些我忘记的技巧。 However, most of these tips date back to 5 years sometimes more.然而，这些技巧中的大多数可以追溯到 5 年，有时甚至更久。 I hope I missed something and that today we finally have a solution to this issue.我希望我错过了一些东西，今天我们终于找到了解决这个问题的办法。 Any solutions with javascript or not are welcomed even libraries.任何带有 javascript 的解决方案都受到欢迎，甚至是库。

Here is an example of what I want ( https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php ).这是我想要的示例（ https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php ）。 However, this trick doesn't work we get a jump as well.但是，这个技巧不起作用，我们也得到了跳跃。

Thank you for your future help!感谢您对未来的帮助！

Answer 1

Finally, I found a solution, here is my solution.最后，我找到了解决方案，这是我的解决方案。

HTML HTML

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

CSS 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

This can be one of the options without fixed background div.这可以是没有固定背景 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