getBoundingClientRect（）返回相对于窗口（视图端口）的值，所以如果你想无论用户如何上下滚动都能准确地得到位置，你最好得到getBoundingClientRect（）的值加上文档坐标。
例如使用下面的函数

// get document coordinates of the element
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  };
}

字符串
有关详细信息，请参阅此处的完整文档https://javascript.info/coordinates

我不认为使用getBoundingClientRect().top是滚动到元素的正确方法。getBoundingClientRect()函数返回相对于窗口的边界框，而不是整个网页，因此它可能无法给予元素的正确位置。
您可以尝试使用containerRef.current.scrollIntoView()滚动元素以查看。如果你想得到偏移值，你可以尝试containerRef.current.offsetTop + window.scrollY

对于那些从Google来到这里的人：
对我来说，getBoundingClientRect()和来自window或document的偏移量值的组合不起作用，我必须使用来自html元素本身的偏移量：

getTopDistance(htmlElement) {
    return htmlElement.getBoundingClientRect() - htmlElement.offsetTop;
}

字符串

import React, { useLayoutEffect, useRef } from 'react';

function YourComponent() {
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    console.log(containerRef.current.getBoundingClientRect().top);
  }, []);

  return (
    <div className="experience-container">
      <div ref={containerRef} className="image-container-1">
        <div>
          <img src={image1} alt="" />
        </div>
      </div>
    </div>
  );
}

export default YourComponent;

字符串