window.addEventListener('scroll', function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 觸發(fā)加載更多
    loadMoreData();
  }
});

{
  time: 3893.92,           // 發(fā)生交叉的時(shí)間戳
  rootBounds: DOMRectReadOnly, // 根元素的矩形區(qū)域信息
  boundingClientRect: DOMRectReadOnly, // 目標(biāo)元素的矩形區(qū)域信息
  intersectionRect: DOMRectReadOnly,   // 交叉區(qū)域信息
  isIntersecting: true,     // 是否正在交叉
  intersectionRatio: 0.54,  // 交叉比例
  target: element          // 被觀察的目標(biāo)元素
}

const options = {
  root: null,        // 根元素，null表示視口
  rootMargin: '0px', // 根元素的外邊距
  threshold: 0.1     // 閾值，可以是數(shù)組[0, 0.25, 0.5, 0.75, 1]
};

const observer = new IntersectionObserver(callback, options);

const [data, setData] = useState([]);        // 數(shù)據(jù)列表
const [loading, setLoading] = useState(false); // 加載狀態(tài)
const [hasMore, setHasMore] = useState(true);  // 是否還有更多數(shù)據(jù)

const loaderRef = useRef(null);

useEffect(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting && hasMore && !loading) {
        loadMoreData();
      }
    },
    { threshold: 0.1 }
  );

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

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

const loadMoreData = async () => {
  setLoading(true);
  try {
    const newData = await fetchData(); // 你的API調(diào)用
    setData(prev => [...prev, ...newData]);
    setHasMore(newData.length > 0);
  } catch (error) {
    console.error('加載失敗:', error);
  } finally {
    setLoading(false);
  }
};

return (
  <div className="infinite-scroll-container">
    {data.map(item => (
      <div key={item.id} className="item">
        {/* 你的項(xiàng)目?jī)?nèi)容 */}
      </div>
    ))}
    
    <div ref={loaderRef} className="loader">
      {loading && <div>加載中...</div>}
      {!hasMore && <div>沒(méi)有更多內(nèi)容了</div>}
    </div>
  </div>
);