useIntersectionObserver
一个简易使用 Intersection Observer API 的 React 钩子。
演示
尝试向下滚动查看效果。
用法
请查看 API。
源码
API
const observerReturn = useIntersectionObserver(elementTarget, callback, options)
元素目标 ElementTarget
ElementTarget 是一个联合类型，代表可以被定位的各种元素。
更多详情，请参见 ElementTarget 或 ElementTarget 类型。
选项 Options
export interface UseWebObserverOptions {
/**
* 调用此函数后立即开始观察
*
* @defaultValue true
*/
immediate?: boolean
}
/**
* DOM 内建的 IntersectionObserverInit
*
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserver#options
*/
interface IntersectionObserverInit {
root?: Element | Document | null
rootMargin?: string
threshold?: number | number[]
}
export type UseIntersectionObserverOptions = UseWebObserverOptions & IntersectionObserverInit
回调函数 Callback
当观察到目标元素的可见性变化时，将调用此回调函数。
interface IntersectionObserverCallback {
(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
}
返回值
Returns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export interface UseWebObserverReturns<Observer> extends Pausable {
/**
* 持有观察者实例的 ref
*/
observerRef: React.MutableRefObject<Observer | null>
/**
* 检查当前环境是否支持观察者
*/
isSupported: boolean
}
export type UseIntersectionObserverReturns = UseWebObserverReturns<IntersectionObserver>
