CSS全屏背景在移动设备上滚动时底部显示白条

Posted 2023-02-19

【中文标题】CSS全屏背景在移动设备上滚动时底部显示白条

【英文标题】：CSS fullscreen background shows whitebar at bottom when scrolling on mobile

【发布时间】：2021-03-18 03:20:30

【问题描述】：

我有一个带有全屏背景图片的网站。

html, body 
  height: 100vh;


html 
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

此代码在大多数设备上都可以正常工作，但在一些旧的 android 设备上，这会在向下滚动时导致问题。部分向下滚动，但不松开手指会显示一个与 URL 栏大小相同的白条，同时消失。一旦你松开手指，背景就会自行修复。

这是图像在滚动时的样子。

有没有办法确保背景总是填满页面？

---

编辑：我也尝试添加具有这些属性的 div：

#background 
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;

这显示了背景，但出现了同样的问题。

【问题讨论】：

你用bodyheight: 100%试试这个吗？

@AsifSharifShahid 是的，我有。它没有任何效果，因为无论如何页面的内容总是填充超过 100%。

试试scroll-snap 看看它的位置:)

@myjobistobehappy 你能解释一下如何使用该属性来解决我的问题吗？

@JulianLachniet，试试position: fixed

【参考方案1】：

问题是背景附件：已修复； 如果图像使用它所属的 div 滚动，一切正常，但一旦固定它就会占用 100vh。

我已经在这方面工作了更长的时间，然后我想承认并且还没有找到解决方案。

它似乎只是不想听实际的 div 高度；在我的例子中，（使用 background-size:cover;）innerHeight (100vh) 在工具栏处于活动状态时读取 653px，在工具栏消失时读取 709px。

在输入此内容时，我做了一个简单的测试（在 Firefox 移动版上：

所以我在背景图像上使用了固定高度和自动宽度，使用底部有一条简单红线的图像：

使用高度：653 - 图像中的红线显示（显然） 使用高度 709 - 工具栏消失时不显示红线！

这意味着当工具栏消失时，被工具栏遮挡的像素根本不会被渲染。事件虽然他们应该在我的逻辑..

编辑： 我认为我有一个解决方案：在包装器中放置一个 div 放在站点的其余部分后面（如果您像我一样有每个部分的背景，则可以堆叠）。将此设置为绝对并使用 javascript 获取元素的偏移顶部（背景应该属于）并将背景的“顶部”属性偏移为等于它所属的 div。 我尝试使用 offsetTop 属性来匹配偏移量，但还没有成功。

但理论上，可以在背景图像上使用位置粘性来模拟位置固定效果，而不会出现内容跳转或烦人（看似）的错误。

【参考方案2】：

使用-webkit-fill-available

https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

我有一个类似的问题，我必须在没有 Safari 工具栏的情况下计算身体的高度。想出了这个解决方案。不知道它是否也适合你：

身体 高度：100vh； 高度：计算（var（--vh，1vh）* 100）；

【参考方案3】：

那是因为height: 100vh; 你需要增加高度。也许你应该试试height:100% 或试试min-height: 100vh;

【讨论】：

对你有帮助吗

【参考方案4】：

如果完全不使用滚动条，您可以将 oveflow 添加到 body 中，并且不会看到溢出。尝试将 margin 和 padding 设置为 0

【参考方案5】：

试试这个：420 是常见的手机屏幕尺寸。 ？？？是基于你的元素高度

@media screen and (max-width: 420px) 
  .sampleCSSclass 
    height: calc(100vh - ????px);
  

【参考方案6】：

我不知道该怎么做，所以我查了一下。 Safari 倾向于在所有网站上执行此操作，但您可以针对您的情况进行修复。我在 Stack Overflow 上发现了一些关于如何修复它的 类似 问题。我将在下面介绍一些解决方案：

为你的背景添加一个滚动类

html,
body 
 height: 100%;
 margin: 0;
 overflow: hidden;

.scroll 
 overflow: auto;
 height: 100%;

防止溢出滚动

html,
body 
 -webkit-overflow-scrolling: auto;

使用 iNoBounce 库

这个库可以在here找到。如果其他方法不起作用，这应该是您最后的手段。自 2018 年以来，所有者还没有发布过新的更新，但目前它已经通过了我的测试。快乐编码:)

【讨论】：

这没什么区别。

@JulianLachniet，嗯，我会寻找另一个解决方案。

@JulianLachniet，我更新了。告诉我进展如何。

【参考方案7】：

你试过了吗：

html 
   min-height: 100vh;

这是在以下链接问题中建议的，这似乎与您的问题相似：

https://***.com/a/47372972/6119844

【参考方案8】：

如果您只是将主应用程序背景设置为黑色，并使用混合的小黑色条纹扩展背景照片怎么办？ 这听起来像是 Android 错误/功能。

【讨论】：

颜色确实代替了白条，但这并不是我问题的真正解决方案。

【参考方案9】：

试试这个。它会让你的背景总是填满页面

html, body 
  height: 100vh;


html 
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

  position: absolute;

【讨论】：

这样破坏了页面的布局，并没有解决问题。

永远不要将html元素的position设置为absolute

【参考方案10】：

您可以尝试使用伪元素，这可能有点工作，但它可能会解决问题，就像这样

html, body 
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;


body::after 
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;

【讨论】：

在不破坏布局的情况下，我无法将 html 和 body 设置为 100vh 和 100vw。

【参考方案11】：

在 ios 和更新的 Android 设备上，vh 已得到修复，因此 100vh 始终是最小顶栏底部和屏幕底部之间的高度。

在旧设备中情况并非如此，因此当用户通过滚动摆脱某些浏览器顶栏时，vh 会发生变化。

引入此修复是为了阻止您看到的现象，以及滚动时元素大小的潜在“跳跃”。它引入了另一个问题，即当用户首次进入页面时，并非所有背景都会显示。

在您的情况下，这并不明显，因为图像底部有一段距离是纯色。底部附近是否有文字会很重要。

你也许可以通过一个绝对放置的元素或一个伪元素来解决你的问题，它们具有相同的背景，但在 100vh 以上。这可能有效，即。考虑到图像的性质，它提供了可见的连接。

我知道这不是一个通用的解决方案。

【讨论】：

我尝试将背景添加为整个页面下方的固定位置。即使这样，我仍然可以看到白条。

我不是在考虑固定位置，而是绝对的，具有更大的高度和额外的代码，而不是代替。额外的 div 的高度是多少？如果不这样做，则应该使用伪元素。

我编辑了问题以显示我的代码。我在那里有同样的问题。我不确定你所说的伪元素是什么意思，

developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

这与body::after 的其他答案所建议的有什么不同吗？它与在正文中添加<div> 具有相同的问题。