javascript - 背景附件 : fixed + background-size: cover on Ipad?

Question

我有一些高度为 100% 的 block ，它通过单个鼠标滚轮向下滚动(我使用 mousewheel.js 来实现)。在那个 block 中，我有另外 2 个高度和宽度为 100% 的 block ，背景图像随淡入淡出效果而变化。我为这个 block 设置了 background-size: cover 和 background-attachment: fixed。它在桌面浏览器上运行良好。但是在 iPad 上我遇到了一些问题:

.first-block {
background-size: cover;
background-attachment: fixed;
position: absolute;
-webkit-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
top: 0;
}

1. fixed 和 cover 一起不起作用，图像缩放得太大了。我决定设置 background-attachment: scroll 和使用添加此代码的 jQuery 模拟 background-attachment: fixed

   $(window).scroll(function() {
     var scrolledY = $(window).scrollTop();
     $('.first-block').css('background-position', 'center ' + ((scrolledY)) + 'px');
   });
   

它工作正常，但在 Ipad 和 Safari (Mac OS) 上它的工作速度太慢了。它的浏览器几乎崩溃了。

当我改变 Ipad 中的显示方向时 - 背景不会为每个方向重建。它的显示 img 大小只有第一个方向。

我在这里阅读了很多类似的问题，但我找不到更好的解决方案。请参阅 JsFiddle 演示。

DEMO with FIXED

DEMO with emulating FIXED with jQuery

感谢您的帮助。

Answer 1

在理解许多脚本方面，我并不是专家，但我可以告诉您的几乎可以完全解决您的问题。当您使用 mousewheel.js 等脚本时，您会发现手持设备和平板电脑的 react 与桌面浏览器有很大不同。

就您遇到的延迟而言，这可能是由于设备的限制所致。我敢肯定，如果您要在其他平板电脑上尝试，您会发现与此类似的结果。您最好的解决方案是使用媒体查询优化您的网站，这样您就可以确保尽管大多数用户将获得您想要的体验，但平板电脑用户仍然可以访问所需的信息和基本的网站功能。

比如:

@media (min-width: 700px) and (orientation: landscape) { ... }

和:

@media (min-width: 700px) { ... }

将允许您针对 CSS 中的这些条件编写 CSS。您可以在此处找到资源:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

我还建议，如果您希望保留您想要的内容，那么我会考虑尝试使用其他执行相同操作的 JS 文件。

很抱歉，如果我提供的内容没有为您提供所需的确切解决方案。