jquery - 使用动画链 (jQuery) 在 Ipad 上实现 ScrollLeft 和 ScrollTop

Question

我一直在绞尽脑汁地理解为什么我的代码在每一个最新的浏览器上都能工作，而在 iPad 上却不行，好吧，它只能工作一半。

首先，这是我正在尝试创建的网站:http://madovar.com

当我点击顶部的“联系我们”链接时，我尝试使用 jQuery 的 animate 滚动到右侧，然后滚动到底部，它在 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();

});
});

请帮助我，我已经在互联网和 Stackoverflow 上搜索了此内容。

谢谢

Answer 1

我最近遇到了这个问题。显然 Mobile Safari 中有一个错误，不允许 scrollTop和scrollLeft在 body 上进行动画处理或html元素。跨浏览器修复，我在另一个 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);
        }
    }
});

在此发布此内容，以防其他人将来偶然发现这个问题。