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

Question

对于我正在开发的页面，我在 iOS 平台上遇到了一些奇怪的问题。 此是有问题的页面。单击任何案例研究图像时，页面将首先取消隐藏所需的案例研究，然后滚动到它。

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

不太确定如何调试或解决此问题。

任何想法都会有很大帮助！

提前致谢， Shadi

更新 1

可以在此处找到最新页面。仍然没有找到解决办法 - 如果有人有任何想法那就太棒了！

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 工作，它会使浏览器嘎吱作响并且动画并不顺利。但如果您使用回调，它会先滚动，然后执行您需要的操作。

我在 .top 的末尾放置了 -15，因为我想显示我正在滚动的 div 的顶部边缘，只是出于美观目的。 1000 是动画的持续时间（以毫秒为单位）。

感谢海报、动画、提示。

Answer 4

定义 {'axis':'y'} 已经使它正确了！它帮助我解决了向上/向下滑动的闪烁问题。

Answer 5

我不确定这是否适用于 jquery 动画。但以下似乎会影响 CSS 动画。

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

我猜您可以将两者结合起来，抓住顶部位置并将动画链接为“左/右/上/下” ”动画也。

Answer 7

我也有同样的问题。

问题是 ScrollTo 插件。不使用scrollto.js，只需使用带有scrollTop 的.animate。 ipad/iphone 不再闪烁。

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

Answer 8

您应该在选项对象中包含 {axis: 'y'}。还要确保您没有启用中断选项。您可以使用 {interrupt: false} 对此进行测试。

Answer 9

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

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

Answer 10

我在 iPhone 上也遇到了同样的闪烁问题——即使使用了 PreventDefault 和 return false 取消默认点击事件的选项。看起来在设备上它会在滚动之前尝试返回到页面顶部。如果你同时有scrollTop 和scrollLeft 动画，那确实会出现问题。这是 jQuery 的问题。我见过使用 mootools 的滚动方法，但没有这个问题。请参阅此页面：http://melissahie.com/

Answer 11

感谢 nicole 提供了 mootools 的示例。
当尝试在scrollTop 和scrollLeft 上执行动画时，这确实似乎是一个jQuery 问题。

配合 mootools：

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

在 iOS5 上完美运行！