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

我一直在理解为什么在每个最新的浏览器上我的代码工作，而不是在iPad上，它的工作原理只有一半。使用动画链（jQuery）的Ipad上的ScrollLeft和ScrollTop

首先，这里是我努力使工作现场：http://madovar.com

我想，当我点击联系我们在顶部链接，滚动到右侧，然后在底部，使用jQuery的动画效果，它在FF，IE8 +和Chrome浏览器中的效果非常好。

但是当我登上iPad时，它会像想象的那样向右滑动，然后开始向下滚动一下，直接向左移动，然后将scrolldown动画到我的代码的空白部分。

这里是我的脚本：

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

}); 
});

请帮助我，我有搜索这个互联网和＃1。

感谢

来源

2012-03-28 Triben

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

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

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

来源

2012-03-28 23:52:06 gowansg

嗯，我试着用逗号，但仍然有同样的问题。谢谢回复。任何其他想法？ – Triben 2012-03-29 14:03:31

@Triben你应该看看[this]（http://stackoverflow.com/q/8359748/1289454）的答案。我做了一个快速搜索“jQuery的ipad滚动问题”，并遇到它。让我知道是否为网页正文以外的其他动画制作。希望这可以帮助。 – gowansg 2012-03-29 16:02:30

我最近有这个问题。很显然，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); 
     } 
    } 
});

在这里张贴在此情况下，任何人绊倒。

来源

2013-01-30 17:01:31 asleepysamurai

我刚刚遇到了这个解决方案中最奇怪的问题： window.scrollTo只适用于当前窗口当前位于iOS 6上的Safari 6中的顶部0 ..如果我做了一个手动的window.scrollTo（0），我可以跳转到窗口。 scrollTo（100） - 但不是更远.. – Tigraine 2013-08-20 11:17:05

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

回答

相关问题