Observes visibility changes for a given element.
- Use the
useState()
hook to store the intersection value of the given element. - Create an
IntersectionObserver
with the givenoptions
and an appropriate callback to update theisIntersecting
state variable. - Use the
useEffect()
hook to callIntersectionObserver.observe()
when mounting the component and clean up usingIntersectionObserver.unobserve()
when unmounting.
代码实现
const useIntersectionObserver = (ref, options) => {
const [isIntersecting, setIsIntersecting] = React.useState(false);
React.useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
setIsIntersecting(entry.isIntersecting);
}, options);
if (ref.current) {
observer.observe(ref.current);
}
return () => {
observer.unobserve(ref.current);
};
}, []);
return isIntersecting;
};
使用样例
const MyApp = () => {
const ref = React.useRef();
const onScreen = useIntersectionObserver(ref, { threshold: 0.5 });
return (
<div>
<div style={{ height: '100vh' }}>Scroll down</div>
<div style={{ height: '100vh' }} ref={ref}>
<p>{onScreen ? 'Element is on screen.' : 'Scroll more!'}</p>
</div>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);
翻译自:https://www.30secondsofcode.org/react/s/use-intersection-observer