上一篇 [筆記] Vue ScrollView 來打造無限捲動 Infinite Scroll 中，提及該 ScrollView 套件的限制。這篇主要說明如何用在 Vue 中用原生 JS 來達成效果，同時解決瀏覽器和桌面的相容性問題。
程式碼
注意事項
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)
按讚加入粉絲團
