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

【问题标题】：iPad Flicker on auto scroll using JQuery and Scrollto plugin使用 JQuery 和 Scrollto 插件自动滚动时 iPad 闪烁
【发布时间】：2011-05-06 18:20:13
【问题描述】：

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

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

不太确定如何调试或修复此问题。

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

提前致谢，沙迪

更新 1

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

【问题讨论】：

哎哟。刚刚在我的 iPad 模拟器上测试过，我明白你的意思了......
也许在 iphone/ipad 设备上 click() 事件应该替换为 touch 事件？我不确定，只是一个想法。我认为触摸设备上的点击事件有更长的持续时间来区分它与双击（触摸）
Prcela 是正确的，点击事件应该被忽略，而应该使用 touchstart 或 touchend。使用点击事件会使 UI 显得迟钝，这与双击检测有关。当用户触摸屏幕时，会触发“touchstart”事件，并开始 300 毫秒的倒计时。如果用户在计时器到时之前松开手指，它将等到计时器到时发送“点击”事件。如果用户按住手指直到 300 毫秒计时器结束，则在松开手指后立即发送点击事件。

标签： iphone jquery ipad ios scrollto

【解决方案1】：

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

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

【讨论】：

唉，没什么区别 :(

【解决方案2】：

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

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

语法

-webkit-backface-visibility: visibility;

参数

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

编辑

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

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

试试

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

这只是一个猜测......

【讨论】：

我不确定。我将从将选项应用于所有内容开始。看看它的作用。
感谢@dubbelj 突然提出的这个建议。顺便说一句，它修复了在转换开始时文本渲染方法闪烁的问题，如operadiperoni.com 上所见。将其应用为 hidden 会强制它以稍薄的重量持续渲染。

【解决方案3】：

你试过了吗：

$('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;
        }
    });

【讨论】：

【解决方案4】：

我还将确认 Tund Do 的方法完美无缺。如果您需要相同事物的“左/右”变体（就像我一样），那就是：

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

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

【讨论】：

【解决方案5】：

我在 iPhone 上也有同样的闪烁——即使使用 preventDefault 并返回 false 选项来取消默认点击事件。似乎在设备上它试图在滚动之前返回页面顶部。如果你同时有一个 scrollTop 和 scrollLeft 动画，它真的会出错。这是 jQuery 的问题。我见过一个使用 mootools 的滚动方法，它没有这个问题。看到这个页面：http://melissahie.com/

【讨论】：

【解决方案6】：

我遇到了同样的问题。

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

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

【讨论】：

【解决方案7】：

如果你只是垂直滚动页面，你可以用这个简单的行替换整个 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 是动画的持续时间（以毫秒为单位）。

感谢海报，动画，提示。

【讨论】：

【解决方案8】：

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

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

【讨论】：

这为我修好了，iPhone 4。
即使使用 iOS7 和最新的 scrollTo 插件，这仍然是必要的（并且有效）
请注意，在 2.0 版之后可能不再需要它

【解决方案9】：

感谢 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 上完美运行！

【讨论】：

【解决方案10】：

定义 {'axis':'y'} 是正确的！它帮助我滑动向上/向下闪烁。

【讨论】：

将 .scrollTo(, {'axis':'xy'}) 更改为 .scrollTo(, {'axis':'y'}) 并且闪烁消失了。

【解决方案11】：

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

【讨论】：