Ipad上的ScrollLeft和ScrollTop使用动画链（jQuery）

我一直在理解为什么在每个最新的浏览器上我的代码工作，而不是在iPad上，它只能在一半的方式工作。

首先，这是我正在努力工作的网站： http ： //madovar.com

我想，当我点击顶部的联系我们链接，滚动到右边然后到底部，使用jQuery的动画，它在FF，IE8 +和chrome，safari中运行良好。

但当我上iPad时，它就像它想象的那样向右移动，然后开始向下滚动一点并直接向左移动，然后将滚动动画设置为我代码的空白部分。

这是我的脚本：

jQuery(document).ready(function($) { $('.contact').bind('click', function (event) { $('html, body').animate({ scrollLeft: "+=2200" }, 1500, 'easeInOutExpo').delay(400).animate({ scrollTop: "+=2000" }, 3000, 'easeInSine'); event.preventDefault(); }); }); 

请帮助我，我已经搜索了Internet和Stackoverflow。

谢谢

Answer 1

我最近遇到了这个问题。 显然，Mobile Safari中存在一个错误，它不允许在body或html元素上对scrollTop和scrollLeft进行动画处理。 一个跨浏览器修复，我在另一个StackOverflow答案中找到（现在找不到链接）：

 var left; $('body,html').stop().animate({pageYOffset: topValue, pageXOffset: leftValue}, { duration: 500, easing: 'swing', step: function(now, fx) { if (fx.prop == 'pageXOffset') { left = now; } else if (fx.prop == 'pageYOffset') { window.scrollTo(left, now); } } }); 

这里发布这个以防万一其他人将来偶然发现这个问题。

Answer 2

我在视口的元标记中看到了一些由语法引起的错误。 如果您使用Chrome开发者工具检查页面，您也应该看到错误。 您的元标记应如下所示：

请注意，正确的语法使用逗号而不是内容属性中的值之间的分号。 修复此问题可能会解决您在iPad上的问题。