Intersection Observer 真實案例:自動更新目錄
近期製作到內容大綱(Table of Contents)相關的功能,發現是一個很適合使用 Intersection Observer 的案例,透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗,現在這樣的需求就變得更加容易實現。
近期製作到內容大綱(Table of Contents)相關的功能,發現是一個很適合使用 Intersection Observer 的案例,透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗,現在這樣的需求就變得更加容易實現。
近期工作剛好接觸很多介面開發的部分,其中一個需求實作「無限滾動加載功能」,當使用者滾動到頁面底部時會自動加載更多的資料,不用點擊按鈕就能瀏覽更多的資料,就像是自動版的加載按鈕。近期工作剛好接觸很多相關的介面功能開發,讓我們用 Vue Composition API 來實作。