判断dom是否在视口内，并监听滚动事件

原创已于 2025-01-24 10:09:12 修改 · 308 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

于 2025-01-17 15:55:04 首次发布

import { MutableRefObject, useEffect, useState } from 'react';
import 'intersection-observer';

const getTargetElement = (
  target,
  defaultElement,
) => {
  if (!target) {
    return defaultElement;
  }

  let targetElement = null;

  if (typeof target === 'function') {
    targetElement = target();
  } else if ('current' in target) {
    targetElement = target.current;
  } else {
    targetElement = target;
  }

  return targetElement;
}

const isInViewPort = (el: HTMLElement) => {
  if (!el) {
    return undefined;
  }

  const viewPortWidth =
    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  const viewPortHeight =
    window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  const rect = el.getBoundingClientRect();

  if (rect) {
    const { top, bottom, left, right } = rect;
    return bottom > 0 && top <= viewPortHeight && left <= viewPortWidth && right > 0;
  }

  return false;
}

const useInViewport = (target, options) => {
  const [inViewPort, setInViewport] = useState(() => {
    const el = getTargetElement(target);
    return isInViewPort(el as HTMLElement);
  });

  useEffect(() => {
    const el = getTargetElement(target);
    if (!el) {
      return () => {};
    }

    const observer = new IntersectionObserver((entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          setInViewport(true);
        } else {
          setInViewport(false);
        }
      }
    }, options);

    observer.observe(el as HTMLElement);

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

  return inViewPort;
}

export default useInViewport;