Question

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

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

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

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

提前致谢，沙迪

更新1

可以找到最新页面here。仍然没有找到解决方法 - 如果有人有任何想法，那将是惊人的！

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

定义{'轴'：'y'}使它正确！它帮助我使用slideUp / Down闪烁。

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只需使用.animate和scrollTop。在ipad / iphone中没有更多的闪烁。

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

Answer 8

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

Answer 9

您需要为每个e.preventDefault();电话添加.click()。这可以防止浏览器的默认操作，即保持在同一位置。希望这有帮助！
即。

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

Answer 10

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

Answer 11

感谢nicole以mootools为例。尝试在BOTH scrollTop和scrollLeft上进行动画时，它似乎是一个jQuery问题。

用mootools：

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

它在iOS5上完美运行！

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

11 个答案: