jquery animate scrollTop 和 scrollLeft 不能同时在 ipad 上工作答案

【问题标题】：jquery animate scrollTop and scrollLeft not working on ipad simultaneouslyjquery animate scrollTop 和 scrollLeft 不能同时在 ipad 上工作
【发布时间】：2012-03-22 21:57:21
【问题描述】：

我有以下 sn-p 代码，可将我的页面动画到首页上的特定点。这在所有浏览器和安卓平板电脑上都能完美运行。

if($("body").hasClass("mobile")){
   $scrollable.animate({scrollTop: getPosition()[0]}, scrollSpeed,scrollEffect);
   $scrollable.animate({scrollLeft:  getPosition()[1]}, scrollSpeed,scrollEffect);
}else{
   $scrollable.animate({scrollTop: getPosition()[0],scrollLeft:getPosition()[1]},     scrollSpeed,scrollEffect);
}

当我使用移动版本时，scrollLeft 和 scrollTop 不会同时工作。所以我把它们分开了，这似乎适用于安卓，但不适用于 Ipad 设备（IOS）。所以在上面的例子中，他会做 scrollLeft 而不是 scrollTop（在 ipad 上）。它们分别完美地工作。所以我的问题是：

我如何让 ipad 做两个动画？

【问题讨论】：

标签： jquery ios ipad scrolltop

【解决方案1】：

似乎 webkit 只能在某些 webkit 构建上滚动 $("html") 元素，请注意，因为这仅在某些版本的 webkit 客户端上才会出现。试试：

$("html").animate({scrollLeft:100})

而不是

$("body")

我找不到很多关于此的文档，但这破坏了我不久前创建的一个网站，发现如果我嗅探 webkit 并将滚动动画应用于 html 而不是正文，则此解决方案有效....

希望对你有帮助

【讨论】：

对于那些在 iOS 模拟器中进行测试的人，我要补充一点，与此类似的 jQuery 在模拟器中无法运行，但在实际设备（iPhone 6、iOS 9.3.5）上运行良好。

【解决方案2】：

我在开发插件时遇到了同样的问题 (http://kirkas.ch/ascensor/)。

显然 ios 浏览器中存在一个错误，当您在 body/html 上同时为 scrollTop/scrollLeft 设置动画时（特别是在绝对位置上），而是尝试为特定容器设置动画。

【讨论】：

可以确认，在 body 元素上单独设置动画 scrollTop 或 scrollLeft 在 ios 上可以正常工作，它们一起看起来很糟糕 - 屏幕抖动和震动，没有任何动作。只是想知道问题中的 $scrollable 是否实际上是 body 元素。