31

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

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

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

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

在此先感谢，沙迪

更新 1

最新的页面可以在这里找到。仍然没有找到解决方法 - 如果有人有任何想法，那就太棒了！

4

11 回答 11

60

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

$.scrollTo(*selector*, *time*, {'axis':'y'});
于 2011-06-06T10:16:15.347 回答
14

你有没有试过这个：

$('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;
        }
    });
于 2010-12-01T04:15:13.257 回答
2

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

于 2013-09-12T06:09:15.343 回答
2

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

归功于海报，动画，用于提示。

于 2011-03-30T20:38:48.137 回答
1

我有同样的问题。

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

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

于 2011-03-10T21:19:40.900 回答
1

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

于 2015-04-22T15:11:16.480 回答
1

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

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

句法

-webkit-backface-visibility: visibility;

参数

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

编辑

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

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

并尝试

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

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

于 2010-11-29T14:23:23.740 回答
1

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

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

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

于 2011-01-19T16:59:48.753 回答
-1

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

于 2011-02-14T20:46:28.767 回答
-1

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

于 2012-03-01T11:34:02.290 回答
-1

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

$("#quicksand li, .client-list li").click(function (e) {
  e.preventDefault();
  ...
});
于 2010-11-26T01:08:11.740 回答