【React】获取元素距离页面顶部的距离

代码实现

import { useEffect, useRef, useState } from 'react';const DynamicPositionTracker = () => {const [distance, setDistance] = useState(0);const divRef = useRef(null);useEffect(() => {const targetDiv = divRef.current;if (!targetDiv) return;// 计算距离函数const calculate = () => {// 获取元素相对于视口的位置const rect = targetDiv.getBoundingClientRect();// 获取页面垂直滚动量const scrollTop = window.pageYOffset;setDistance(rect.top + scrollTop);};// 初始化计算calculate();// 监听滚动和尺寸变化const resizeObserver = new ResizeObserver(calculate);resizeObserver.observe(targetDiv);window.addEventListener("scroll", calculate);// 清理监听return () => {resizeObserver.disconnect();window.removeEventListener("scroll", calculate);};}, []);return (<div ref={divRef}>当前距离顶部: {distance}px</div>);
};