需求：資料量10W左右，一次性加載到前端展現DOM渲染慢的一比，所以目前考慮實作分頁顯示。由于用戶使用習慣，不喜歡點擊翻頁來進行翻頁，需要我們實作滾動條拉到最底部翻頁至下一頁，滾動條拉到最上面翻頁至上一頁。
專案使用框架：Vue
嘗試解決：
1、利用 Element UI 的 Table 組件和分頁組件來實作頁面資料分頁顯示。
2、利用 Element UI 的 infinite-scroll 組件，來模擬實作動態加載。但是后來放棄了，原因：
a）他只能往下動態加載（實際只是監聽了scoll是否到底了）
b）當 scollbar 觸底后，最后一條資料我特么都還沒操作呢，就翻頁了。。。囧。。。如果此時 `return false` 讓其不主動翻頁的話，監聽scoll滾動的事件就失效了！！！必須往上滾動下再往下滾動才可以觸發事件。。。只能放棄。。
c）已經加載的資料（滾動條上面的）沒有被釋放，隨著往下翻動的時間過長越來越多的資料加載DOM渲染，頁面越來越慢
3、放棄使用 Element UI 的 infinite-scroll 組件，改為自己監聽scoll滾動事件
a）同樣是監聽是否scoll到底了，到底后我們在 Table 組件要顯示的List資料中 push 了一條空資料，此時scoll會自動彈回到最后一條顯示，最下面一條空資料沒有被顯示（效果達到了），此時滑輪再滾動時，事件觸發翻頁至下一頁。貌似解決了部分問題。
b）從第2頁開始，需要往上翻頁，我們同樣嘗試在Table 組件要顯示的List資料的最前面 push 了一條資料進去，避免 scoll 剛到頂就自動翻頁
問題：
上面的做法是很扭曲的做法，不想作為正式代碼提交，畢竟是 push 了1條空資料，是否對其他地方有影響，還不得而知。比如操作列的復選框全選等。
求助：
各位大神的專案中，有沒有這種變態的要求的？如果有是如何實作的？
我想現在最主要的問題就是避免 scoll 觸底和到頂的自動翻頁問題，以及到頂或觸底后滑輪的滾動事件就不能再被監聽了。這2個問題！
uj5u.com熱心網友回復：
自己手寫個虛擬滾動自己定制就行了uj5u.com熱心網友回復：
防抖方法，onscroll一次滾動一定的距離uj5u.com熱心網友回復：
設定一個標記flog=false監聽滾動條到達底部，定時器0.5s延遲執行flog=true
當flog=true 并且 scroll在底部 并且 滑鼠往下滾動加載下一頁，
這么做第一次滾動到底部，不會立馬翻頁，再次滾動就會翻頁，如果第一次滾動到底，又往上滾動，再往下不想直接翻頁，在往上滾動時，讓flog=false
權當參考
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/18695.html
標籤：JavaScript