Question

同时在Safari 6中设置scrollTop和scrollLeft参数时，只会执行其中一个，仅在一个轴上滚动页面。使用本机JavaScript，jQuery和jquery.scrollTo插件都会发生这种情况。

使用jQuery的.animate()：

的示例

$('body').animate({
    'scrollLeft': 100,
    'scrollTop': 100
}, {
    'duration': 500,
    'easing': 'swing'
});

我在这里设置了一个演示页：http://nabble.nl/demo/safari6scrollto/

所有主流浏览器中的所有示例都可以正常工作，仅限Safari 6中的示例。 4,6和7工作。不知何故，当在IFRAME中加载演示页面时（参见演示页面的底部），一切正常。

这是Safari中的错误吗？如果是这样，如何解决这个问题？如果没有，导致它的原因以及如何解决这个问题？

其他相关报道：

Answer 1

我需要在OSX Mountain Lion上使用jquery.scrollTo插件，因为我找不到导致这种行为的具体细节，所以我整理了一个相当丑陋的解决方法。它在jQuery的window.scrollTo(x, y)的step函数中使用.animate()，这在Safari 6中没有任何问题：

var left;
$(window).animate({
    'pageXOffset': 100,
    'pageYOffset': 100
}, {
    duration: 500,
    easing: 'swing',
    step: function(now, fx) {
        if (fx.prop == 'pageXOffset') {
            left = now;
        } else if (fx.prop == 'pageYOffset') {
            window.scrollTo(left, now);
        }
    }
});

请注意，为每个动画属性调用step函数，对于应用动画的每个元素（在我们的例子中只有1：window）。因此，中间变量用于存储动画中的当前X位置。

它使用pageXOffset对象的pageYOffset和window属性，因此我不知道这种解决方法对scrollLeft和{{1非窗口对象的属性。

无论如何，它适用于滚动整个文档，这是我想要的，并且在Safari 6中也非常流畅！

同时设置scrollLeft / scrollTop在Safari 6中不起作用

1 个答案: