什麼是無限滾動 (Infinite Scroll)
讓人們有滑不完資訊的黑魔法 😈。可以觀察上面動圖的捲軸，在感覺圖片快要滑完時，捲軸會往上跳 + 新的圖片載入。這樣的設計除了影響網頁效能外，還有些使用的優缺點。
拆解背後原理
A. window.scrollY: 從頁面上方已經捲/滑了多少距離 (px)
B. window.innerHeight: 視窗可視範圍的高度 (px)
C. document.body.offsetHeight: 整個頁面的高度，包括還沒看到的內容 (px)
D. 調整項 (e.g. 1000px): 在到達頁面底部前多少距離要觸發無限捲動
實作步驟:1. 監聽捲動 (scroll) 的事件2. 當 A (已滑距離) + B (可視範圍) >= C (整頁高度) - D (調整項)，
就觸發無限捲動載入新的內容 getPhotos() (自定義函數抓取資料)
提供簡單範例如下:
完整程式碼可以參考 👉 這裡
結語
當然還有其他工具可以實作無限滾動，比如 Intersection Observer API。但這篇文章試著用一張圖 (+簡單的公式) 解釋無限滾動原理。歡迎讀到這裡的大家追蹤/拍手/給任何建議。
