無限滾軸(二)的其他做法，工作筆記，經驗筆記

 上回提到用 IntersectionObserver 的方式來實現無限滾軸，當觀察目標 進入到畫面 就新增20筆。

這次的作法，則換成 只要滾軸 到達了底部 就做載入(圖1)；不再是 監測某個元素，是否出現在螢幕畫面。

滾軸到了底部更新(圖1)

這次的做法比較簡單，直接監測滾軸(圖2)是否已經滾到底部了，如果有滾到底部 再去做更新內容。(圖3)

監測滾軸(圖2)

監測滾軸是否滾到底部(圖3)

心得

IntersectionObserver 做的無限更新，在實作後加上查詢功能，會遇到個問題。原本的監測元素A會受到影響查詢功能，監測到的項目有可能不再 或不是原本的項目，則需要在重新綁定，否則有可能出現 滾軸無法動。

因為查詢產生出來的已經不是原本的tr 內容。

換句話說，只要IntersectionObserver 監測的內容有改變，就需要重新綁定監測。

-------------------------------------------------------

用監測scrollbar 來做無限更新，就不會遇到這個問題。因為scrollbar 重頭到尾並沒改變內容，只有改變長度。

加上查詢後，長度則可能停留在查詢前，則需要重新。
ex 在查詢前，長度在 500px； 查詢後項目 只顯示 2項，總高度 110px，但因為採用無限更新，滾軸 並不會重新渲染，所以就必須 將滾軸 scrollTo。


這兩者差異並不算太大，作法上的不同： 一個要重新綁定，一個要將滾軸 重置。