奇怪/不一致的scrollTop行为

Question

在尝试滚动元素而不调用普通事件处理程序时,我偶然发现了这个

使用Firefox和IE10我发现scrollTop方法运行方式有一些非常奇怪的行为.例如,如果我设置scrollTopon a div和aferwards,将scroll事件处理程序绑定到同一个元素,则处理程序立即触发.从我的测试来看,这不会发生在Chrome上,这让我觉得FF和IE正在将最微小的动画应用到他们的卷轴上,或者这是某种错误.

参见JSFiddle示例.有趣的是,如果我在分配之前设置1ms的超时,问题就会消失.我想知道这里发生了什么,以及解决它的最佳方法是什么.

更新:从下面的评论却仿佛这可能被认为是正常的浏览器的行为,所以我会更新我的问题要问这是怎么回事-请引用其更详细地解释这一过程中一些有趣的文章.

Answer 1

IE和FF中发生的事情如下:

1. scrollTop属性已调整
2. 添加了滚动事件处理程序
3. 执行功能完成.现在,浏览器有时间处理其他事情并将呈现页面.渲染导致同时提交滚动处理程序和scrollTop属性.因此,scrollTop更改会触发由处理程序捕获的滚动事件.

这与此代码不同:

var dv = document.getElementsByTagName("div")[0];
dv.scrollTop = dv.scrollHeight;
setTimeout(function(){
    dv.onscroll = function() { 
    console.log("scrolled!");
}, 0);

以下哪些方面很开心:

1. scrollTop属性已调整
2. setTimeout函数附加将onscroll事件处理程序添加到事件队列的函数.基本上推迟执行代码直到发生超时处理(另请参见较新的window.setImmediate).
3. 执行您的功能完成.现在,浏览器有时间处理其他事情并将呈现页面.渲染将触发滚动事件,但由于您的函数已延迟,因此尚未添加,因此没有捕获滚动事件.
4. 渲染页面完成.现在,浏览器有时间处理其他事情,并将执行setTimeout设置的功能.这将添加onscroll事件处理程序,但由于已经触发了scroll事件,因此不会调用事件处理程序.

有关该主题的更多信息可以在这里和这里找到.