奇怪/不一致的scrollTop行為

Question

在嘗試滾動元素而不調用普通事件處理程序時，我偶然發現了這個

使用Firefox和IE10我在scrollTop方法的運行方式上看到了一些非常奇怪的行為。 例如，如果我在div和aferwards上設置scrollTop ，將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事件，因此不會調用事件處理程序。

有關該主題的更多信息可以在這里和這里找到。