[筆記] 在 Vue 中用 Vanilla JavaScript 方法來打造無限滾動 Infinite Scroll

上一篇 [筆記] Vue ScrollView 來打造無限捲動 Infinite Scroll 中,提及該 ScrollView 套件的限制。這篇主要說明如何用在 Vue 中用原生 JS 來達成效果,同時解決瀏覽器和桌面的相容性問題。
javascript es6 logo


程式碼


注意事項

1. 在 mounted 階段時,才能取得畫面上的 DOM 元素。因此 window.addEventListener(‘resize’, func) 要放在此階段執行
2. 在離開頁面時,要記得清除 resize 監聽器,不然在其他頁面時仍會繼續觸發,進而導致意料外的錯誤和無謂的效能損耗
3. scrollY ( 已經滾動的高度 ) + clientHeight ( 現在可視的範圍 ) > pageHeight ( 頁面高度 ) 就代表滾到底了,要觸發載入資料事件
4. 為了避免重複觸發載入資料事件,可在判斷條件上要加上 loading 或是資料頁面總數…等值讓你知道已經到最後一頁了
5. 手機版的滾動高度 scrollY 並不一定有辦法讓你滾到底 ( 像是 Android 版的 Google Chrome ),會導致 scrollY + clientHeight 永遠無法大於 pageHeight。你可以考慮加個特定數值 ( 像是 200 ),讓觸發載入事件在還沒有滾動到最底時就執行


參考資料

1. 【前端新手日記】實作My GitHub Repo頁面(github API + infinite scroll)

按讚加入粉絲團

延伸閱讀