ReactJS：滚动时如何获取元素可见部分的高度？

你可以通过getBoundingClientRect()结合视口尺寸准确计算元素的可见高度，核心是判断元素与视口的重叠区域。以下是具体实现：

计算逻辑 #

1. 获取目标元素的位置信息：const rect = document.getElementById('statisticsContainer').getBoundingClientRect();
2. 确定视口边界：视口顶部为0，底部为window.innerHeight
3. 计算元素的可见边界：
   • 可见区域顶部：取元素顶部与视口顶部的最大值（Math.max(rect.top, 0)）
   • 可见区域底部：取元素底部与视口底部的最小值（Math.min(rect.bottom, window.innerHeight)）
4. 可见高度 = 可见底部 - 可见顶部，若结果小于0说明元素完全不可见，取0即可

完整代码示例 #

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  const targetEl = document.getElementById('statisticsContainer');
  const rect = targetEl.getBoundingClientRect();
  
  // 计算可见区域的上下边界
  const visibleTop = Math.max(rect.top, 0);
  const visibleBottom = Math.min(rect.bottom, window.innerHeight);
  
  // 计算最终可见高度
  const visibleHeight = Math.max(0, visibleBottom - visibleTop);
  
  console.log('当前元素可见高度:', visibleHeight);
});

补充说明 #

如果目标元素的父容器是可滚动容器（而非window），只需将视口边界替换为父容器的可视高度与滚动偏移量，逻辑框架一致，仅需调整对应参数即可。你之前用getBoundingClientRect()未达预期，大概率是没正确处理元素与视口的边界重叠情况。

内容的提问来源于stack exchange，提问作者artyom.poteshkin98