Intersection Observer API with React Hook 快速製作無限捲軸 infinite scroll

API Doc :

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

這個Web API幫你監控瀏覽器的捲軸事件，讓我們不需要自己寫傳統的
document.scroll 等事件

 

在網上找了幾個react hook的範例，以下為我主要參考的範例code

Reference:

https://billyjacoby.dev/intersection-observer-react-hooks

 

以下為我改良後的版本，
製作成自定義的Hook，
需求： 在scroll 到 loading 時，會再call API，fetch更多的 data 回來
製作原理： 捲軸捲到target 元素時(捲軸與target 元素產生%數的交集)，進入可視範圍，則do something…
%數可藉由 threshold: 1 來設定，
0~1，1為100%可視