交叉观察器IntersectionObserver对象实战使用

交叉观察器IntersectionObserver对象实战使用

用IntersectionObserver判断滚动页面是否到达底部

import { Toast } from "antd-mobile";
import { useRef, useLayoutEffect, useMemo } from "react";
import { v4 as uuid } from "uuid";

/**
 * 用IntersectionObserver判断滚动页面是否到达底部
 * @returns
 */
const MyPage = () => {
  const bottomRef = useRef<HTMLDivElement | null>(null);

  const list = useMemo(() => {
    // 用 uuid 生成 key，且去掉中间的横杠，只保留前 18 位
    // 注意：生成 200 个空数组，要先 fill(0)，否则 map 不会执行
    return new Array(200)
      .fill(0)
      .map(() => ({ key: uuid().replace(/-/g, "").substring(0, 18) }));
  }, []);

  useLayoutEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          console.log("到底了");
          Toast.show({
            position: "center",
            content: "到底了",
          });
        }
      },
      {
        root: document.getElementById("myComponent"), // 使用滚动视口作为根
        rootMargin: "0px",
        threshold: 1.0, // 完全进入视口时触发
      }
    );

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

    return () => {
      if (bottomRef.current) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        observer.unobserve(bottomRef.current);
      }
    };
  }, []);

  return (
    <div
      id="myComponent"
      style={{
        height: "calc(100vh - 48px)",
        overflowY: "auto",
        padding: "24px",
      }}
    >
      {Array.isArray(list) &&
        list.map((item, index) => {
          return <div key={item.key}>{`${index} --> ${item?.key}`}</div>;
        })}
       // 设置列表底部元素，高度为 1px 即可
      <div ref={bottomRef} style={{ height: "1px" }} />
    </div>
  );
};

export default MyPage;