首页 > 其他分享> 文章详细

React技巧之检查元素是否可见

2022-06-25 00:04:01 阅读：305 来源： 互联网

标签：const 技巧元素 React isInViewport1 entry IntersectionObserver ref

原文链接：https://bobbyhadz.com/blog/react-check-if-element-in-viewport

作者：Borislav Hadzhiev

正文从这开始~

总览

在React中，检查元素是否在视口范围内：

在元素上设置ref属性。
使用IntersectionObserver API来跟踪元素是否与视口相交。

import {useEffect, useRef, useState, useMemo} from 'react';

export default function App() {
  const ref1 = useRef(null);
  const ref2 = useRef(null);

  const isInViewport1 = useIsInViewport(ref1);
  console.log('isInViewport1: ', isInViewport1);

  const isInViewport2 = useIsInViewport(ref2);
  console.log('isInViewport2: ', isInViewport2);

  return (
    <div>
      <div ref={ref1}>Top div {isInViewport1 && '| in viewport ✅'}</div>

      <div style={{height: '155rem'}} />

      <div ref={ref2}>Bottom div {isInViewport2 && '| in viewport ✅'}</div>
    </div>
  );
}

function useIsInViewport(ref) {
  const [isIntersecting, setIsIntersecting] = useState(false);

  const observer = useMemo(
    () =>
      new IntersectionObserver(([entry]) =>
        setIsIntersecting(entry.isIntersecting),
      ),
    [],
  );

  useEffect(() => {
    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [ref, observer]);

  return isIntersecting;
}

该示例向我们展示了，如何检查元素是否在视口范围内。IntersectionObserver API使我们能够检查一个给定的元素是否与文档相交。

useIsInViewport钩子接收一个指向我们想要追踪的元素的ref对象。

IntersectionObserver

IntersectionObserver构造函数接收一个函数，该函数被调用时带有一个entry数组。entry是一个数组，其包含了所有的obeserver的目标元素。这些元素的可见度已经高于或低于intersection observer的比率之一。

每个entry都描述了一个给定元素与根元素（文档）相交的程度。我们解构了这个entry，因为我们的IntersectionObserver只能跟踪一个元素（就是我们设置ref的那个元素）。

我们调用observe()方法，将我们要跟踪的元素传给它 - observer.observe(ref.current)。

每当元素进入视口或者存在于视口中时，我们传递给IntersectionObserver()构造函数的函数就会被调用，然后更新state变量。

//  
 
标签：const,技巧,元素,React,isInViewport1,entry,IntersectionObserver,ref	

来源： https://www.cnblogs.com/chuckQu/p/16410535.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React技巧之检查元素是否可见

总览

IntersectionObserver