Javascript 由于手机上的底部栏，滚动时整页固定背景跳转_Javascript_Html_Css_Ios

Javascript 由于手机上的底部栏，滚动时整页固定背景跳转

javascript html css ios

Javascript 由于手机上的底部栏，滚动时整页固定背景跳转,javascript,html,css,ios,Javascript,Html,Css,Ios,我知道这是一个众所周知的问题，在互联网上有很多答案，但经过两天的研究，我仍然没有找到解决办法。我想要的是一整页固定的背景，上面有内容。问题是当我们向下滚动时，底部栏消失，留下一个空白，然后背景被调整大小，给用户造成不愉快的跳跃。下面是一些我在iOS上尝试过但不起作用的例子（我只有一部iPhone可供使用）天真的解决方案 CSS 完全没有跳跃，但是背景既没有覆盖也没有居中然后我了解到后台附件修复在手机上的支持很差，所以我做了以下工作 HTML 背景是很好的居中和覆盖，但我们得到了小跳跃

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

天真的解决方案

CSS

完全没有跳跃，但是背景既没有覆盖也没有居中

然后我了解到后台附件修复在手机上的支持很差，所以我做了以下工作

HTML

背景是很好的居中和覆盖，但我们得到了小跳跃时滚动，因为底部栏

然后我读了一篇关于身体的小技巧：before（）

滚动时我们会跳转

我还尝试了不同的库（）

同上

javascript的其他一些技巧（）（）

同上

也许还有一些我忘了的把戏。然而，这些技巧大多可以追溯到5年前，有时甚至更久。我希望我错过了什么，今天我们终于找到了解决这个问题的办法。任何使用javascript或不使用javascript的解决方案都是受欢迎的，即使是库也是如此

下面是我想要的一个例子（）。然而，这个把戏不起作用，我们也跳了起来

谢谢你以后的帮助

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

正文{
背景：url（'https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg）；不再重复；
背景尺寸：封面；
高度：220vh；
}
div{
位置：绝对位置；
边框：2倍纯白；
背景色：白色；
宽度：40vw；
高度：最小含量；
显示：内联块；
左：25%；
填充：5vh 5vh 0vw 5vw；
文本对齐：左对齐；
字体大小：4vh；
顶部：10vh；
}



佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus

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

HTML

双宽：100vw；高度：100vh；在#bg类中定义的对设备没有响应。您需要使其响应。您是如何做到的？谢谢。我在扯头发。这很有效。你能解释我的想法吗？它确实有效？我也有类似的问题。我不需要添加“after”，但添加transform:scale（1.0）实际上解决了这个问题，但我不知道为什么它能解决所有问题，这是非常有害的。

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

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

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

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

#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;
    }
}