無限滾軸JS(一)，工作筆記，經驗筆記

前情提要

最近的專案被要求要做到無限滾軸，有點類似像 看漫畫那樣，可以一直往下滾。

也有不少購物網站有做這樣的效果，ex: 掏寶、蝦皮。

IntersectionObserver 就可以做到這樣的效果，lazyload 延遲加載.... 在做大量圖片顯示的時候 就可以避免一次有太多頁出現。(圖1)

IntersectionObserver 觀念 (圖1)

有不少做法是抓最後2行，再去更新；我自己的做法是在滾軸區域範圍設定一個底線，當滾到底線，再去更新達到的效果也是一樣的。(圖2)

設定滾軸範圍的底線(圖2)

透過observer 去觀察 滾軸頁面滾到了#lastone ，如果滾到了 就加載 後面的資料。(圖3)

設立觸發時機(圖3)

之前有設立過觀察最後倒數第一行，但有時候螢幕大，連滾都不用滾，就自動加載完了😅

所以這次就換另外一種作法，設定底線 當滾軸 真的有滾到底線的邊頁#lastone 才加載。

無限滾軸demo(圖4)