javascript - 瀏覽器wiki - 瀏覽器引擎



最新的Blink瀏覽器(如Chrome,Opera)中的奇怪滾動行為 (1)

最近我一直在為Angular構建一個樹視圖組件庫,作為 ngx-tree

問題

在我想出如何為這個庫實現 虛擬滾動功能 以獲得大數據集的性能並讓它在Firefox中正常運行之後不久,我就陷入了 Blink -included瀏覽器中 的奇怪滾動行為(如Chromium,Chrome) ,Opera)。

演示鏈接

這是演示插件 - https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 請參閱下面的更新#1

情況

  • 在Firefox,Edge和IE 11中,我的帶有虛擬滾動功能的庫可以實現平滑滾動。
  • 但是,在Chrome和Opera中,當我滾動到樹視圖內的某些位置時,滾動條的位置(滾動區域的 scrollTop 屬性) scrollTop 下跳動,導致 閃爍的 樹視圖並分解虛擬 - 滾動功能。

瀏覽器詳細版本

  • Chrome - 59.0.3071.115
  • Firefox - 54.0
  • Edge - 40.15063.0.0

其它瀏覽器

在中國,有一些來自Chromium項目的 外殼 瀏覽器(如360se,QQ瀏覽器,搜狗瀏覽器,UC瀏覽器)和 舊版本的V8和blink 。 而且他們沒有那種奇怪的滾動行為。

一些假設

它是由Chromium團隊對滾動實現(如平滑滾動)的一些優化引起的嗎?

希望得到一些指南! (≧﹏≦)

更新#1

使用事件日誌更新演示鏈接: https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

必須在打開devtool之前測試滾動才能看到日誌

我必須更多地解釋虛擬滾動的工作原理以及導致閃爍的原因。

首先,請參閱 虛擬滾動 設計

虛擬滾動的一個關鍵點是,我們創建了一個假捲軸區域,其大小與該區域相同,沒有虛擬滾動檢測。 因此,在最佳情況下,滾動區域的滾動條位置不應改變,直到某些預期事件觸發其更改。 對於滾動事件,我們更新每個動畫幀的視圖。

在高度固定的滾動區域內,如果我們在動畫中正確模擬那些未渲染元素的高度( 計算精度 可能 有一點偏差 ),我們假設一個事實是scrollTop屬性不會 以很大的百分比 變化 幀。

但是,根據我的觀察結果,blink系列瀏覽器似乎執行不同的策略來更新可滾動元素的scrollTop。 更新scrollTop的時​​機與none-blink-series瀏覽器不同。 到目前為止我所知道的一切。

樣品GIF

在這裡,我製作了一些GIF來顯示Chrome,Firefox和Edge的輸出。

火狐

邊緣


您從 virtual-scroll-demo-branch 分支中提取庫:

'ngx-tree': 'https://rawgit.com/e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib',

那個分支是105個提交後面的主人。 它錯誤地在其中一個內部元素上設置 margin-top 。 這是 在較新版本中修復的

編輯:開發人員在 提交消息中 實際引用了此問題。





treeview