检测元素是否在视野内React

最新推荐文章于 2024-05-12 23:38:06 发布

阿迪不想上班

最新推荐文章于 2024-05-12 23:38:06 发布

阅读量847

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_43916997/article/details/131330864

版权

该代码示例展示了如何在React组件中利用`useEffect`和`useRef`hooks，结合`IntersectionObserver`API来检测一个元素是否进入视口，即元素的曝光情况。当目标元素曝光时，会在控制台打印信息并执行相应的逻辑。

摘要由CSDN通过智能技术生成

import React, { useEffect, useRef } from 'react';

const ExposedElement: React.FC = () => {
  const targetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          console.log('Element is exposed:', entry.target);
          // 在这里执行曝光后的逻辑
        }
      },
      { threshold: 0 } // 出现就算曝光
    );

    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  }, []);

  return (
    <div>
      <div style={{ height: '1500px' }}>
        <div
          ref={targetRef}
          style={{ height: '300px', backgroundColor: 'yellow' }}
        >
          Target Element
        </div>
      </div>
    </div>
  );
};

export default ExposedElement;