Question

我有一些高度为100％的块，它通过单个鼠标滚轮向下滚动（我用mousewheel.js做）。在那个区块中，我有2个高度和宽度为100％的其他区块，背景图像随着淡入淡出效果而变化。我为此块设置了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;
}

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中显示的方向时 - 背景不会为每个方向重建。它的显示尺寸仅为第一个方向。

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

DEMO with FIXED

DEMO with emulating FIXED with jQuery

感谢您的帮助。

Answer 1

在理解许多脚本时，我并不是一个专家，但我能告诉你的内容几乎完全解决了你的问题。当您使用mousewheel.js等脚本时，您会发现手持设备和平板电脑的反应与桌面浏览器的反应会有所不同。

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

类似的事情：

@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文件。

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

background-attachment：fixed + background-size：覆盖在Ipad上？

1 个答案: