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实现底部淡化为指定背景颜色的图片。

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

2 个答案: