ScrollLeft and ScrollTop on Ipad using animate chain (jQuery)

问题

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.

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

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.

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.

Here is my script :

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

});
});

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

Thanks

回答1:

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.

回答2:

I'm seeing some errors caused by your syntax in your meta tag for the viewport. If you inspect your page with the Chrome Developer Tools you should see the errors as well. Your meta tag should look like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Notice, that the correct syntax uses commas and not semicolons between the values in the content attribute. Fixing this may fix your issues on the iPad.

来源：https://stackoverflow.com/questions/9917115/scrollleft-and-scrolltop-on-ipad-using-animate-chain-jquery

标签

jquery

ipad

scrolltop