近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Infinite Scroll。
[ Repo ]：https://github.com/andy922200/practice-storybook-react
內容
當面對「向後端伺服器索取大量資料」的情境，除了 Pagination 分頁條外，無限滾動 Inifite Scroll 也是一個選項。前者適合有效率的查找特定資訊，後者則是偵測網頁往下滾動時，資料就會自動載入。
參數
height：元件高度
isLoading
onScrollButton：滑動到底部時，要執行的 callback
概念
「判斷是否滾動到底部」有兩種作法：
監聽 onScroll 滾動事件
Element.scrollTop ( 元素被向上滾動的高度) + Element.clientHeight ( 元素內部高度 ) >= Element.scrollHeight ( 元素的可滾動範圍)
Intersection Observer API
偵測某個元素出現在可視範圍 ( viewport )。這邊是選用當 loading 的圖示出現在可視範圍時達到一定比例，就打 API。
Options
1. root：指定可視範圍，預設值為 document viewport
2. rootMargin：設定 root 周圍的 margin，預設為 0
3. threshold：設定目標元素可見度達到多少比例會觸發 callback，預設為 0
程式碼
相關文章
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 30 – 佈署發佈
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化，便
