使用动画链(jQuery)在Ipad上使用ScrollLeft和ScrollTop [英] ScrollLeft and ScrollTop on Ipad using animate chain (jQuery)

问题描述

我一直不遗余力地理解为什么我的代码在每个最新的浏览器上都能工作，而在iPad上却不能，我的代码只能工作一半.

I have been breaking my head on understanding why on every latest browser my code works, and not on iPad, well it works only half way.

首先，这是我要工作的网站: http://madovar.com

First, here is the site I am trying to make work : http://madovar.com

当我单击顶部的与我们联系"链接时，我尝试使用jQuery的动画向右滚动至底部，在FF，IE8 +和chrome，Safari浏览器中都很好用.

I am trying to, when I click on the contact us link on the top, to scroll to the right and then to the bottom, using animate from jQuery, it works great in FF, IE8+ and chrome, safari.

但是当我上iPad时，它会像预期的那样向右移动，然后开始向下滚动一点，然后直接向左滚动，然后将向下滚动的动画设置为我代码的空白部分.

But when I get on the iPad, it goes to the right like it is suppose to, then starts scroll down a bit and goes directly to the left and then animates the scrolldown to a blank part of my code.

这是我的剧本:

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上搜索了此内容.

Please help me, I have search the Internet and Stackoverflow for this.

谢谢

推荐答案

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

I had this problem recently. Apparently there is a bug in Mobile Safari, which does not allow scrollTop and scrollLeft to be animated on the body or html elements. A cross-browser fix, which I found in another StackOverflow answer (can't find the link now):

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);
        }
    }
});

将其发布在此处，以防将来有人偶然发现此问题.

Posting this here in case anybody else stumbles upon this question in future.

这篇关于使用动画链(jQuery)在Ipad上使用ScrollLeft和ScrollTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！