近期在項目中使用ant design 的tree組件時,由於數據量大的時候,開啟了虛擬滾動,導致快速滾動時頁面出現空白現象,如下圖:
仔細排查了一下具體原因,是antd tree的bottom和scroll top計算沒算對,導致多滾動了一段距離,仔細排查發現,antd tree依賴了rc-tree,rc-tree又依賴了rc-virtual-list,和antd官網例子對比分析發現,我們和他們最大的區別就在於rc-virtual-list的版本號。
雖然我們刪除了node_modules和yarn.lock, 重新yarn install 但rc-virtual-list的版本號並沒有發生改變,那我們就在yarn.lock中的rc-virtual-list(如下圖)這幾行代碼刪掉,重新yarn install --force就可以了。
rc-virtual-list的 3.2.5版本有bug.... 升級到3.3.0虛擬滾動就不會產生計算問題了。