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

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用户)

我注意到一个bug。当使用滑动来横向滚动时，它会随着动量移动。如果当你点击返回主页键时，屏幕仍在滑动，那么它就不起作用了。

Answer 2

在收到一个有类似问题的人的电子邮件后，回到这个问题。

我的问题是，我让整个网站伸展页面的主体，这与iPad的触摸控制(如滑动)很好。然而，通过这样做，我需要用javascript(锯齿状)或position: fixed(平滑，但不支持移动)移动导航框。

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

在动画停止之前，导航栏将无法点击，但有时甚至在动画结束后，它也无法点击，直到你通过滚动、缩放等方式与网站进行交互。显然，这种解决方法不是用户友好的。

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

可能有更好的解决方案，但现在，我们只是把它包装在一个div中，这样我们的导航就不需要移动了。