在 iPad 上使用 touchmove 事件移动图像

Question

我有一个网站，它有一个固定的背景图像，我正在尝试适应 iPhone 和 iPad，因为图像不会保持静态。我尝试了各种包装器，但都没有运气；要么我不能以一种方式滚动，要么网站不能正确滚动（因为使用了动态 ajax）。所以我开始寻找是否有办法通过滚动页面来移动图像背景，我使用了以下方法：

$(document).bind('touchmove',function(e){
    $('.background_image').css({top: $(document).scrollTop()});
$('.background_image img').css({top: $(document).scrollTop()});
console.log($('.background_image img').css('top'));
});

$(document).bind('scroll', function() {
    $('.background_image').css({top: $(document).scrollTop()});
    $('.background_image img').css({top: $(document).scrollTop()});
});

这似乎适用于第一次“触摸”，但背景不会持续移动。当我停止移动时，“滚动”绑定会启动并将图像移动到正确的位置。 这是一个可能的壮举，还是我试图在这里实现不可能？记录输出表明 css 确实正在更改，但屏幕并未随之更新。

更新

我不知道它是否有帮助，但这是我目前正在使用的 HTML/CSS：

<div class="background_image">
    <img src="image.jpg" />
</div>

.background_image {
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
z-index: -1;
}

.background_image img {
position: fixed;
overflow: hidden;
top: 0px;
left: 0px;
background: white;  
}

还将我的代码更改为更简单的代码。

干杯，

丹

Answer 1

这似乎适用于第一次“触摸”，但背景不会持续移动。当我停止移动时，“滚动”绑定会启动并将图像移动到正确的位置。这是一个可能的壮举，还是我试图在这里实现不可能？记录输出表明 css 确实被更改了，但屏幕并未随之更新。

不幸的是，目前这在 iOS 设备上是不可能的。我在 iOS 优化网站上使用 jQuery Mobile 已经有一段时间了，这是最大的缺点之一。 jQuery Mobile 团队这样描述问题（参见 here。）：

请注意，iOS 设备在滚动期间冻结 DOM 操作，将它们排队以在滚动完成时应用。

这就是您观察到的行为的原因。滚动完成后，事件正在排队并更新 bg 图像。您很可能可以通过使用 iScroll 来解决此问题，它完全替换了您选择的容器中的本机滚动处理程序，但我不确定它是否值得完成这项任务你正在努力完成。

Answer 2

我们决定采用一种变通解决方案，并为 iPhone 实现在底部淡出为指定背景颜色的图片。