React+Bootstrap滚动触发元素高度跳动问题求助

1. 布局变化触发循环更新 #

在scroll事件回调中修改元素高度时，元素的bottom位置（currY）会随之改变——因为元素高度增加会向下延伸，导致getBoundingClientRect().bottom的数值变大。这个位置变化会再次触发scroll事件（浏览器感知到布局变动后会重新计算滚动相关状态），进而再次执行handleWorksTitle函数，形成修改高度→位置变化→触发scroll→再次修改高度的循环，最终导致高度来回跳动。

2. 敏感的百分比计算放大波动 #

当窗口高度过小或bottomPivot.current值过低时，GetPerCurrToTarget_Bottom中的rangeVal = window.innerHeight - targetLoc会趋近于0。此时currY的微小变化（比如元素高度调整带来的位置偏移）会被放大成百分比的大幅波动，直接导致元素高度跳变加剧。

1. 分离计算基准与元素高度的依赖 #

不要使用元素自身的bottom位置作为计算依据，改用元素顶部相对于视口的位置或页面滚动距离作为基准——这两个值不会随元素自身高度变化而改变，从根源上切断循环触发的链条：

function handleWorksTitle() {
  const titleCont = document.querySelector("#works-title-cont");
  // 改用元素顶部位置作为计算基准，不受自身高度影响
  const currTop = titleCont.getBoundingClientRect().top;
  
  if(currTop <= window.innerHeight) {
    const heightTarget = breakpointStateRef.current == breakpoints.lg ? worksTitleMovLg : 
                        (breakpointStateRef.current == breakpoints.md ? worksTitleMovMd : worksTitleMovSm);
    // 调整百分比计算逻辑，基于顶部进入视口的位置
    const percentage = GetPerCurrToTarget_Top(currTop, topPivot.current);
    const value = heightTarget / 100 * percentage;
    titleCont.style.height = `${Math.min(value, heightTarget)}rem`;
  }
};

// 配套的顶部基准计算函数
export function GetPerCurrToTarget_Top(currLoc, targetLoc) {
  const rangeVal = window.innerHeight - targetLoc;
  if (rangeVal <= 0) return 100;
  
  const valInRange = window.innerHeight - currLoc;
  const clampedVal = Math.max(0, Math.min(valInRange, rangeVal));
  return (100 / rangeVal) * clampedVal;
}

2. 添加防抖处理，减少高频触发 #

对scroll事件回调做防抖，避免短时间内多次执行计算，降低振荡频率：

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

// 简单防抖函数
const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

function YourComponent() {
  // 创建防抖后的回调函数
  const debouncedHandleWorksTitle = useCallback(debounce(handleWorksTitle, 16), []);
  
  useEffect(() => {
    window.addEventListener("scroll", debouncedHandleWorksTitle);
    return () => window.removeEventListener("scroll", debouncedHandleWorksTitle);
  }, [debouncedHandleWorksTitle]);
  
  // 其他组件逻辑...
}

3. 修复百分比计算的边界问题 #

在GetPerCurrToTarget_Bottom中添加边界判断，避免除以0、负百分比或超出100%的极端值：

export function GetPerCurrToTarget_Bottom(currLoc, targetLoc) {
  const rangeVal = window.innerHeight - targetLoc;
  // 处理rangeVal为0或负数的情况，直接返回100%
  if (rangeVal <= 0) return 100;
  
  const valInRange = window.innerHeight - currLoc;
  // 限制数值在0到rangeVal之间，确保百分比在0-100范围内
  const clampedVal = Math.max(0, Math.min(valInRange, rangeVal));
  const percentage = (100 / rangeVal) * clampedVal;
  
  return Math.max(0, Math.min(percentage, 100));
}

4. 用Intersection Observer替代scroll监听 #

Intersection Observer API可以更高效地监听元素与视口的交互状态，避免频繁的scroll事件触发，同时结合CSS变量实现平滑动画：

useEffect(() => {
  const titleCont = document.querySelector("#works-title-cont");
  const observer = new IntersectionObserver(
    (entries) => {
      const entry = entries[0];
      // 获取元素在视口中的可见比例
      const ratio = entry.intersectionRatio;
      const heightTarget = breakpointStateRef.current == breakpoints.lg ? worksTitleMovLg : 
                          (breakpointStateRef.current == breakpoints.md ? worksTitleMovMd : worksTitleMovSm);
      // 通过CSS变量设置高度
      titleCont.style.setProperty('--title-height', `${ratio * heightTarget}rem`);
    },
    {
      root: null,
      rootMargin: '0px',
      threshold: Array.from({length: 101}, (_, i) => i/100) // 0-100%的渐变阈值
    }
  );
  
  observer.observe(titleCont);
  return () => observer.unobserve(titleCont);
}, [breakpointStateRef]);

修改CSS，用CSS变量控制高度并添加过渡：

#works-title-cont {
  --title-height: 0rem;
  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--title-height);
  max-height: 100%;
  overflow-y: hidden;
  transition: height 0.05s ease; /* 平滑过渡减少跳变感 */
}

5. 缓存高度值，避免重复DOM操作 #

用ref缓存当前设置的高度，只有当新计算值与缓存值差异超过一定阈值时才更新DOM，减少不必要的布局变动：

const currentHeightRef = useRef(0);

function handleWorksTitle() {
  const titleCont = document.querySelector("#works-title-cont");
  const currY = titleCont.getBoundingClientRect().bottom;
  
  if(currY <= window.innerHeight) {
    const heightTarget = breakpointStateRef.current == breakpoints.lg ? worksTitleMovLg : 
                        (breakpointStateRef.current == breakpoints.md ? worksTitleMovMd : worksTitleMovSm);
    const percentage = GetPerCurrToTarget_Bottom(currY, bottomPivot.current);
    const value = heightTarget / 100 * percentage;
    const finalValue = Math.min(value, heightTarget);
    
    // 只有差异超过0.1rem时才更新
    if(Math.abs(finalValue - currentHeightRef.current) > 0.1) {
      titleCont.style.height = `${finalValue}rem`;
      currentHeightRef.current = finalValue;
    }
  }
};

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