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

Posted 2023-03-12

【中文标题】在 iPad 上使用 touchmove 事件移动图像

【英文标题】：Move image with touchmove event on iPad

【发布时间】：2011-05-01 17:43:12

【问题描述】：

我有一个网站，它有一个固定的背景图像，我正在尝试适应 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;  

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

干杯，

丹

【问题讨论】：

您是否尝试过将图像设为实际背景图像并仅更新该图像的 src？ （即使用 background-image:url('image.jpg'); background-position:top center; background-repeat:no-repeat; ）？请记住，position:fixed 在 ios 设备上不起作用（因为它们滚动的是视口，而不是文档）。

@ampersand - 我试过只使用背景图像标签，但图像在滚动时只是停留在同一位置，而不是保持在理想的视口内，这正是我所需要的。此外，每次页面更改时，我都会交叉淡化背景，因此它不是理想的解决方案（尽管如果它有效，我很乐意将其保留）

您能否发布一个示例链接来展示您的一些问题？

【参考方案1】：

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

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

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

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

【讨论】：

是的，我认为可能是这种情况...我尝试过使用 iScroll、YUI Scroll 和其他一些工具，但是当我尝试打包网站时，网站的功能似乎受到了严重影响（不包括背景图像 div 部分）。

正如我所料。这些工具非常酷，但并非完全没有自己的问题。恐怕答案是因为我在上面发布的原因，您将无法做到这一点。

【参考方案2】：

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