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

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中的错误吗？如果是这样，如何解决这个问题？如果不是，是什么原因造成的，如何解决？

其他相关报道：

• https://github.com/flesler/jquery.scrollTo/issues/9
• http://forum.jquery.com/topic/scrolltop-scrollleft-not-working-in-safari-6
• http://bugs.jquery.com/ticket/12588

Answer 1

我需要让 jquery.scrollTo 插件在 OSX Mountain Lion 上工作，因为我找不到导致这种行为的具体细节，所以我整理了一个相当丑陋的解决方法。它window.scrollTo(x, y)在 jQuery 的 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);
        }
    }
});

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

它使用对象的pageXOffsetandpageYOffset属性window，所以我不知道这种解决方法是否适合为非窗口对象的scrollLeftand属性设置动画。scrollTop

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