Question

我无法测试我的网站，因为我没有iPad，但我正在工作的那个人昨天去了一家苹果商店尝试一下并且有奇怪的行为。

所以它是一个水平滚动网站，如果你单击导航它会使用jquery滚动到指向链接的元素。这适用于所有浏览器，在firefox，chrome或IE9中没有控制台错误。

iPad上的问题是，第一次点击链接工作正常 - 它会滚动它应该。但在此之后，点击链接不再有效。他说它会移动几个像素然后停止。

我签署了一份保密协议，因此我无法展示该网站，但这里是我与导航相关联的代码。这里有什么不对吗？有没有人在iPad上遇到过这类问题？

$("#navhome, #logo").bind('click', function(event) {
    // Home button and the page logo send you to the #home element
    event.preventDefault();
    scrollToID($("#home"), this);
});

function scrollToID(id, nav) {
    $("html, body").stop();
    xtarget = id.position().left;
    $("html, body").animate({scrollLeft: xtarget}, 'slow');
}

我的意思是，这似乎是这样做的方式。为什么ipad会有麻烦？

我现在一直在浏览谷歌，如果没有能够链接页面，我不会期望太多。：/

Answer 1

你可以发布更多代码吗？你的例子在我的iPad上似乎对我很好。

http://jsfiddle.net/DzyYT/

http://jsfiddle.net/DzyYT/show（适用于iPad用户）

我发现了一个错误。当使用滑动向侧面滚动时，它会以动量移动。如果在单击“返回主页”按钮时屏幕仍然滑动，则它不起作用。

Answer 2

在收到有类似问题的人发来的电子邮件后回到此问题。

我遇到的问题是我让整个网站都拉伸了页面的主体，这与iPad的触控功能（如滑动）完美配合。但是，通过这样做，我需要使用javascript（锯齿状）或位置：固定（平滑，但移动支持不佳）移动导航框。

然后出现了iOS5中的一个错误，我仍然不确定原因，但它与通过jQuery动画滚动以及在移动过程中使用带有可点击元素的移动div有关。

在动画停止之前导航将变得无法点击，但有时即使在动画之后它也会变得无法点击，直到您通过滚动，缩放等方式与网站进行交互。显然，此解决方法不是用户友好的。

我的最终解决方案是将内容包装在一个大小与浏览器宽度相符的div中。您可能知道，iPad和类似的触摸设备没有滚动div的原生触摸支持，只是滚动有限。

在某处可能有更好的解决方案，但是现在，我们只是将它包装在一个div中，这样我们的导航就不必移动了。只有我们的内容移动，包含在其中。

iPad + Jquery滚动工作一次，然后停止

2 个答案: