ios 整页固定的背景跳跃时，滚动，因为底部酒吧在移动的

mfuanj7w 于 2023-05-19 发布在 iOS

关注(0)|答案(4)|浏览(100)

我知道这是一个众所周知的问题，在互联网上有很多答案，但两天的研究后，我仍然没有找到解决方案。我想要的是一个全页的固定背景，上面有内容。问题是，当我们向下滚动时，底部栏消失，留下一个白色，然后背景被调整大小，为用户创建一个不愉快的跳跃。这里有一些我尝试过的例子，在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（background: fixed no repeat not working on mobile）

我们在滚动时得到一个跳跃

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

问题同上

JavaScript的一些其他技巧（https://css-tricks.com/the-trick-to-viewport-units-on-mobile/）（Background image jumps when address bar hides iOS/Android/Mobile Chrome）

问题同上
也许还有一些我忘记的技巧。然而，这些提示中的大多数可以追溯到5年前，有时甚至更久。我希望我错过了一些东西，今天我们终于有了解决这个问题的办法。任何与javascript或不受欢迎的解决方案，甚至库。
下面是我想要的示例（https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php）。然而，这个把戏不工作，我们得到一个跳跃以及。
感谢您今后的帮助！

ios

来源：https://stackoverflow.com/questions/61733809/full-page-fixed-background-jumps-when-scrolling-because-of-the-bottom-bar-on-mob

4条答案

按热度按时间

agyaoht71#

最后，我找到了一个解决方案，这就是我的解决方案。
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;
    }
}

赞(0）回复(0）举报 2023-05-19

r55awzrz2#

这可以是没有固定背景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>

赞(0）回复(0）举报 2023-05-19

vlurs2pr3#

您可以使用一个hack，它使用position: fixed作为bg https://css-tricks.com/the-fixed-background-attachment-hack/

赞(0）回复(0）举报 2023-05-19

jgovgodb4#

这也可以通过html元素上新的lvh和lvw单元来修复。我能够通过在html和body元素上使用100%的大视口高度和宽度来修复跳跃的背景。根据这篇文章
https://redstapler.co/all-css-viewport-units-svh-lvh-svw-lvw-dvh-dvw-explained/
这些单元将调整到设备的最大视口尺寸，并且不允许基于接口自动调整尺寸。

赞(0）回复(0）举报 2023-05-19

我来回答

ios 整页固定的背景跳跃时，滚动，因为底部酒吧在移动的

4条答案

相关问题

热门标签

最新问答