iPad闪烁使用JQuery和Scrollto插件自动滚动

我正在开发一个页面，在iOS平台上有一个奇怪的问题。 这是有问题的页面。 点击任何一个案例研究图片，页面将首先取消隐藏所需的案例研究，然后滚动到它。

这适用于Windows和Mac上的所有桌面浏览器，但在iPhone和iPad上滚动时会产生可怕的闪烁。

不太清楚如何debugging或修复这个问题。

任何想法将是非常有帮助的！

谢谢，沙迪

更新1

最新的网页可以在这里find。 还没有find一个修复 – 如果任何人有任何想法，这将是惊人的！

Answer 1

如果只需要垂直滚动，则可以使用{'axis':'y'}作为scrollTo方法的设置。

 $.scrollTo(*selector*, *time*, {'axis':'y'}); 

Answer 2

你有没有试过这个：

 $('a[href=#target]'). click(function(){ var target = $('a[name=target]'); if (target.length) { var top = target.offset().top; $('html,body').animate({scrollTop: top}, 1000); return false; } }); 

Answer 3

如果你只是垂直滚动页面，你可以用这个简单的线代替整个jQuery的scrollTo插件：

 $('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic'); 

我个人做这样的事情

 $('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){ //do stuff }); 

我发现，如果我在滚动的时候尝试去做其他的js工作，那么浏览器就会紧缩，animation也不会stream畅。 但是如果你使用callback，它会先滚动，然后做你所需要的。

我在-top的末尾放了一个-15，因为我想显示我滚动的div的上边缘，仅仅是为了美观的目的。 1000是animation的持续时间（以毫秒为单位）。

信贷去海报，animation，小费。

Answer 4

定义{'axis'：'y'}已经做对了！ 它帮助我滑动/向下闪烁。

Answer 5

我不知道这是否适用于jQueryanimation。 但以下似乎影响CSSanimation。

http://css-infos.net/property/-webkit-backface-visibility

句法

 -webkit-backface-visibility: visibility; 

参数

可见性确定变换元素的背面是否可见。 默认值是可见的。

编辑

尝试将其应用于每个元素，看看会发生什么。

 *{ -webkit-backface-visibility: visible; } 

并尝试

 *{ -webkit-backface-visibility: hidden; } 

这只是一个猜测…

Answer 6

我也会确认Tund Do的方法是完美无缺的。 如果你需要一个同样的东西的“左/右”变体（就像我做的那样），那就是：

 $('.pg6').click(function(){ var target = $('#page6'); if (target.length) { var left = target.offset().left; $('html,body').animate({scrollLeft: left}, 1000); return false; } }); 

我猜想你可以将两者结合起来，抓住最上面的位置，并链接“左/右/上/下”animation的animation。

Answer 7

我有同样的问题。

问题是ScrollTo插件。 而不是使用scrollto.js只是与scrollTop使用.animate。 没有更多的闪烁在iPad / iPhone。

这里是没有闪烁http://www.sneakermatic.com

Answer 8

您应该在选项对象中包含{axis: 'y'} 。 还要确保你没有启用中断选项。 你可以用{interrupt: false}来testing。

Answer 9

你需要添加e.preventDefault(); 到每个.click()调用。 这可以防止浏览器的默认操作，即停留在同一个地方。 希望这可以帮助！
即

 $("#quicksand li, .client-list li").click(function (e) { e.preventDefault(); ... }); 

Answer 10

我在iPhone上有相同的闪烁 – 即使使用preventDefault并返回取消默认点击事件的false选项。 看起来，在设备上它试图在滚动之前回到页面的顶部。 如果你有一个scrollTop和scrollLeftanimation进行它真的得到越野车。 这是jQuery的问题..我已经看到一个滚动方法与mootools没有这个问题。 看到这个页面： http : //melissahie.com/

Answer 11

感谢nicole给mootools的例子。 当试图在BOTH scrollTop和scrollLeft上做一个animation的时候，看起来确实是个jQuery问题。

随着mootools：

 var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut}); scroll.start(y, x); 

它在iOS5上完美运行！