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

最新推荐文章于 2025-04-24 20:06:37 发布

一颗不甘坠落的流星

最新推荐文章于 2025-04-24 20:06:37 发布

阅读量337

点赞数 3

分类专栏：工作随记文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_45677671/article/details/147399406

版权

工作随记专栏收录该内容

78 篇文章

订阅专栏

文章目录

- 代码实现

代码实现

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>
  );
};