javascript - window.scrollTo 是否在 Safari 中异步工作？

Question

最近我发现 window.scrollTo 在 Safari(6.0.5 (8536.30.1)，MacOS 10.8.4)中的行为非常奇怪(在我看来)。它似乎异步工作。

我的任务听起来像:

• 制作一些绝对定位的div以固定定位(固定)
• 做一些页面滚动
• 使之前修改过的 div 绝对定位(取消固定)

因此，要取消固定此 div，我必须在滚动修改完成后立即执行取消固定例程。在这里我遇到了问题。除了 Safari，我检查过的每个浏览器都能正确执行。

重现步骤:

1. 在 Safari 中打开任何网页，并确保它至少可滚动 100 像素，并且初始滚动偏移量为 0
2. 在开发工具中打开 js 控制台
3. 执行:window.scrollTo(0, 100); console.log(document.body.scrollTop);

输出为 0。但是当我将此代码更改为 window.scrollTo(0, 100); window.setTimeout(function() {console.log(document.body.scrollTop)}, 1); 正如预期的那样，输出为 100。

以下是我测试过的所有其他浏览器(在哪些地方运行良好):

• Chrome 浏览器 27.0.1453.110(苹果操作系统 10.8.4)
• Firefox 21.0 (MacOS 10.8.4)
• Opera 12.15 b1748 (MacOS 10.8.4)
• IE 8.0.7601.17514 (Win7)

好吧，只要我的代码示例不是跨浏览器的，就可以更轻松地使用 jQuery 在任何网页上检查此行为:

var $w = $(window); 
$w.scrollTop(100); 
console.log($w.scrollTop());

对比

var $w = $(window); 
$w.scrollTop(100); 
window.setTimeout(function() {
    console.log($w.scrollTop())
}, 1);

这种行为是正常的还是错误？如何处理？ (现在我修改了 $.fn.scrollTop 以返回 $.Deferred 而不是链接并在除 Safari 之外的所有浏览器的主线程中立即解析它)。

Answer 1

实际上，我只是尝试重现您的问题，即使使用 Safari 6.0.5(在 Lion 上，即 OS X 10.7)也没有成功。

你可以运行这个 jsfiddle与 https://www.browserstack.com/screenshots确认它适用于所有 Safari 版本(5.1、6.0、6.1、7、8)。

确实是 spec说，我引用:

When a user agent is to perform a smooth scroll of a scrolling box box to position, it must update the scroll position of box in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is completed, the scroll position of box must be position. The scroll can also be aborted, either by an algorithm or by the user.

除非我读错了，否则 Safari 有权在为滚动设置动画时为您提供旧值(或任何东西)。因此，如果浏览器想要将其发挥到极致，您的 setTimeout 方法甚至可能无法正常工作。