IE 11平滑滾動不點火中間滾動事件

如果我們做一個簡單的測試案例，如：IE 11平滑滾動不點火中間滾動事件

document.documentElement.addEventListener('scroll', function() { 
    console.log(document.documentElement.scrollTop); 
});

然後去滾動通過點擊軌道使用滾動條，或者使用下頁/上一頁，那麼我們可以看到我們只在滾動動畫結束時得到一個事件。

現在理論上我可以通過模擬滾動事件來修復一些行爲。 jQuery和Underscore示例代碼：

$(function() { 
    var $document = $(document), until = 0; 

    var throttleScroll = _.throttle(function() { 
     $document.scroll(); 
     if (+new Date < until) { 
      setTimeout(throttleScroll, 50); 
     } 
    }, 50); 

    $document.keydown(function (evt) { 
     if (evt.which === 33 || evt.which === 34) { 
      until = +new Date + 300; 
      throttleScroll(); 
     } 
    }); 
});

但它仍然不起作用。我們只收到原始scrollTop和目的地scrollTop的滾動事件，兩者之間沒有值。

如果然後去console.log(document.documentElement.scrollTop)每10ms，那麼我們可以看到IE只是不更新scrollTop，因爲它滾動。

如果我們想要將某些內容「釘」到滾動位置，這是非常令人沮喪的。它與IE瀏覽器變得生澀。

我沒有在任何其他瀏覽器上觀察到此行爲，也沒有使用以前的IE版本進行測試。

如果有人找到了解決IE瀏覽器行爲的方法（也許有一個神奇的CSS來關閉IE 11中的平滑滾動？），那麼我非常想聽聽它！

感謝:-)

來源

2014-02-14 daniel.gindi

什麼都沒有啊？也這麼覺得。 –

這是舊的，但我遇到了完全相同的問題。我嘗試過使用setInterval並強制該函數在60fps下更新，但這使得它在所有瀏覽器上都顯得非常緊張。此外，它似乎沒有在IE上有所作爲：\ – Jason

經過一番更多的調整之後，我發現最好的方法是儘可能使用'position：fixed'而不是'position：absolute'與手動'頂部'。這絕對是IE中的渲染錯誤。它沒有像禁用平滑滾動一樣顯示自身，但它仍然有點生澀。另外，平滑滾動默認是啓用的，所以幾乎所有的IE用戶都會注意到這個問題。 – Jason

-1

看起來像有IE瀏覽器後，並迫使屏幕「漆」，以幫助拖放。似乎大多數表現努力的相反，但可能工作？ https://stackoverflow.com/a/12395506/906526（從https://stackoverflow.com/users/315083/george代碼）

function cleanDisplay() { 
    var c = document.createElement('div'); 
    c.innerHTML = 'x'; 
    c.style.visibility = 'hidden'; 
    c.style.height = '1px'; 
    document.body.insertBefore(c, document.body.firstChild); 
    window.setTimeout(function() {document.body.removeChild(c)}, 1); 
}

你可以嘗試CSS動畫，因此瀏覽器處理動畫/過渡。例如在滾動和CSS動畫上應用顯示/隱藏類。

.hide-remove { 
    -webkit-animation: bounceIn 2.5s; 
    animation: bounceIn 2.5s; 
} 

.hide-add { 
    -webkit-animation: flipOutX 2.5s; 
    animation: flipOutX 2.5s; 
    display: block !important; 
}

如果沒有瀏覽器處理動畫（使用創意css），關鍵幀和JS性能可能會提供線索。另外，我看過幾個導航欄的網站，在滾動結束後「重新出現」。

來源

2014-09-03 04:49:35 celeryandsprite

這會有什麼幫助？重繪與滾動無關。如果這個*會起作用，你是否建議讓瀏覽器每X毫秒重繪一次，不管它是否在滾動？ –

我把這個問題理解爲「移動菜單」看起來不穩定，所以建議重新繪製定位信息。滾動滾動時，所有瀏覽器都會大跳躍。 – celeryandsprite

不，問題不在於點擊事件。 –

您所描述的問題僅限於在Windows 7上運行的Internet Explorer 11的實例。此問題不會影響IE 11誕生的平臺Windows 8.1。看起來好像Windows 7上的IE 11與上面提到的其他滾動實現類似。這並不理想，但這是我們必須暫時與/與其合作的事情。

我打算繼續研究這個;實際上，只是在早上把Windows 7機器從衣櫃裏拿出來安排第一件事情，以便進一步調查。雖然我們無法解決這個問題，也許也許，我們可以繞過這個問題本身。

待續。

來源

2014-11-18 07:39:34 Sampson

聽起來像......你來自IE團隊？還是我誤會了？無論如何 - 任何努力表示讚賞！而且我確信不僅僅是我......這是對可能的功能的一個重大限制。（虛擬桌面等） –

@ daniel.gindi是的，我是Internet Explorer團隊的程序管理員。如果您因此而中斷演示，我會很感激鏈接。有待嘗試的東西會使進一步的調查更有成果。 – Sampson

太棒了！那麼我的桌面js的測試頁面就是Backbone。 https://raw.githack.com/danielgindi/DGTable。js/master/example/example.html 您可以看到，滾動時 - 應填充空間的行是白色的，因爲它們還不存在。在這個演示緩衝區是巨大的，但仍然不足以覆蓋IE瀏覽器平滑滾動... –

作爲一種瘋狂的最後手段（如果問題非常嚴重，似乎並不那麼瘋狂） - 也許完全關閉本地滾動並使用自定義滾動（即http://jscrollpane.kelvinluck.com/）？和onscroll東西綁定到其自定義事件：http://jscrollpane.kelvinluck.com/events.html

來源

2014-12-02 00:41:53 Andrey

是的，這可能是一個解決方案（或黑客），我將不得不做一些測試，看看它是如何處理觸摸事件... –

你說：「如果有人已經找到了一種方法來解決IE瀏覽器的行爲（或許還有一個神奇的CSS關閉平滑滾動的IE 11？），那麼我非常希望聽到它！「

這並沒有關閉它，但這裏是我用來解決固定元素中的光滑滾動問題。

if(navigator.userAgent.match(/Trident\/7\./)) { 
    $('body').on("mousewheel", function (event) { 
     event.preventDefault(); 
     var wd = event.wheelDelta; 
     var csp = window.pageYOffset; 
     window.scrollTo(0, csp - wd); 
    }); 
}

來源

2015-06-02 15:28:31

看起來不錯 - 停止IE 11繼續滾動...你嘗試創建一個解決方案，以修復頁面上/下？ –

如果我們可以添加對基於觸摸（滑動）滾動，鍵盤上/下和觸控板的支持，那將是驚人的。我得到的錯誤是使用background-attachment：fixed。 – patrickzdb

IE 11平滑滾動不點火中間滾動事件

回答

相關問題