Question

我一直在理解为什么在每个最新的浏览器上我的代码都可以工作，而不是在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();

});
});

请帮帮我，我已经在网上搜索了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);
        }
    }
});

在此发布此信息，以防其他人在将来偶然发现此问题。

Answer 2

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

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

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

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

2 个答案: