如何计算元素视口可见高度并将按钮置于可见区域中心？

问题根源 #

1. 可见高度计算错误：原代码中bottomIntersection逻辑颠倒，导致元素底部超出视口时无法正确计算可见区域高度，进而使箭头位置计算偏差。
2. 未处理动态高度变化：目标Div通过懒加载动态扩展高度，但原逻辑仅在引用初始化时绑定滚动监听，高度变化后无法重新计算箭头位置。

修复方案 #

1. 修正可见高度计算逻辑 #

通过视口边界与元素边界的交集计算正确可见高度：

• 取元素顶部与视口顶部的较大值作为可见区域上边界
• 取元素底部与视口底部的较小值作为可见区域下边界
• 可见高度为下边界减上边界，结果取非负值

2. 监听元素尺寸变化 #

使用ResizeObserver监听目标Div的尺寸变化，在懒加载导致高度扩展时自动重新计算箭头位置。

3. 滚动事件防抖优化 #

避免滚动时频繁触发计算，降低性能损耗。

完整代码实现 #

import { useEffect, useState, useRef } from 'react';

// 防抖工具函数
const debounce = (func, delay = 100) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const YourComponent = () => {
  const epgRowsSpanRef = useRef(null);
  const [arrowPosition, setArrowPosition] = useState('50%');
  const resizeObserverRef = useRef(null);

  useEffect(() => {
    const calculateArrowPosition = () => {
      if (!epgRowsSpanRef.current) return;
      
      const { top, bottom, height } = epgRowsSpanRef.current.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      
      // 计算可见区域的上下边界
      const visibleTop = Math.max(top, 0);
      const visibleBottom = Math.min(bottom, windowHeight);
      // 正确的可见高度
      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
      
      if (height === 0) return;
      // 计算箭头在可见区域的垂直居中位置（基于元素自身高度的百分比）
      const visibleStartPercent = (Math.max(0, -top) / height) * 100;
      const visibleMidPercent = visibleStartPercent + (visibleHeight / height) * 100 / 2;
      
      setArrowPosition(`${Math.round(visibleMidPercent)}%`);
    };

    // 防抖后的滚动处理函数
    const debouncedHandleScroll = debounce(calculateArrowPosition);

    // 绑定滚动监听
    window.addEventListener('scroll', debouncedHandleScroll);
    // 初始化计算一次
    calculateArrowPosition();

    // 监听元素尺寸变化
    resizeObserverRef.current = new ResizeObserver(calculateArrowPosition);
    epgRowsSpanRef.current && resizeObserverRef.current.observe(epgRowsSpanRef.current);

    return () => {
      window.removeEventListener('scroll', debouncedHandleScroll);
      resizeObserverRef.current?.disconnect();
    };
  }, []);

  return (
    <div ref={epgRowsSpanRef} style={{ position: 'relative', height: '2000px' }}>
      {/* 箭头按钮示例 */}
      <button 
        style={{ 
          position: 'fixed', 
          top: arrowPosition, 
          left: '20px',
          transform: 'translateY(-50%)'
        }}
      >
        ↑
      </button>
      <button 
        style={{ 
          position: 'fixed', 
          top: arrowPosition, 
          right: '20px',
          transform: 'translateY(-50%)'
        }}
      >
        ↓
      </button>
      {/* 懒加载内容区域 */}
    </div>
  );
};

export default YourComponent;

关键说明 #

• 箭头定位逻辑：通过计算可见区域在元素整体高度中的起始百分比，加上可见区域一半的百分比，确保箭头始终处于可见区域的垂直中间位置。
• ResizeObserver：自动监听Div的高度变化，适配懒加载带来的动态扩展场景。
• 防抖处理：减少滚动时的计算频率，避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者Manas Sarma