窗口Resize时如何让视口始终固定到预设滚动位置？

问题背景 #

Web应用包含5个与视口尺寸完全一致的区块，采用scroll-snap功能。原生CSS scroll-snap存在浏览器兼容性问题，且无法控制滚动吸附延迟，在Chrome和Edge中体验卡顿，因此改用scroll-snap库。但窗口Resize时，视口可能停留在两个区块之间，需要实现handleResize函数确保始终有一个区块居中显示。

此前尝试的两种方案在快速Resize时均出现跳转到错误区块的问题：

方案1：维护currentSection变量 #

通过判断容器scrollTop是否在当前区块边界内更新currentSection，再滚动到该区块顶部。但Resize时scrollTop会进入上方区块边界，导致跳转错误。代码如下：

useEffect(() => {
  // Set currentSection to the first section (introduction) if it hasn't been set yet
  if (!currentSectionRef.current) {
    currentSectionRef.current = sectionElements[0];
  }
  // Snap the scroll position to the start of the current section when resizing window
  const handleResize = (): void => {
    if (
      !scrollContainerRef.current ||
      sectionElements.length === 0 ||
      !currentSectionRef.current
    ) {
      return;
    }
    sectionElements.forEach((section) => {
      const top = section.offsetTop;
      const bottom = section.offsetTop + section.offsetHeight;
      if (
        (scrollContainerRef.current as HTMLElement).scrollTop >= top &&
        (scrollContainerRef.current as HTMLElement).scrollTop < bottom
      ) {
        currentSectionRef.current = section;
      }
    });
    scrollContainerRef.current.scrollTo(
      0,
      currentSectionRef.current.offsetTop
    );
  };
  window.addEventListener("resize", handleResize);
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, [sectionElements]);

方案2：计算最近区块 #

通过计算scrollTop到各区块顶部的距离，滚动到最近的区块。但快速Resize时仍会跳错区块。代码如下：

useEffect(() => {
  // Snap the scroll position to the start of the nearest section when resizing window
  const handleResize = (): void => {
    if (!scrollContainerRef.current || sectionElements.length === 0) {
      return;
    }
    const scrollPosition = scrollContainerRef.current.scrollTop;

    const distancesToSections = sectionElements.map((element) =>
      Math.abs(scrollPosition - element.offsetTop)
    );
    let shortestDistanceToSection = Math.min(...distancesToSections);
    let nearestSectionIndex = distancesToSections.indexOf(
      shortestDistanceToSection
    );
    let nearestSection = sectionElements[nearestSectionIndex];

    nearestSection.scrollIntoView({ behavior: "auto" });
  };

  window.addEventListener("resize", handleResize);
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, [sectionElements]);

解决方案 #

核心问题是快速Resize时，区块尺寸和位置频繁变化，依赖scrollTop或距离判断易出错。需基于视口可见区域中心定位当前区块，同时添加防抖处理避免频繁触发。

改进后的代码 #

import { useEffect, useRef } from 'react';

useEffect(() => {
  // 初始化当前区块为第一个
  if (!currentSectionRef.current && sectionElements.length > 0) {
    currentSectionRef.current = sectionElements[0];
  }

  // 防抖函数，避免快速Resize时频繁触发
  const debounce = (func: () => void, delay: number) => {
    let timeoutId: NodeJS.Timeout;
    return () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(func, delay);
    };
  };

  const handleResize = () => {
    if (!scrollContainerRef.current || sectionElements.length === 0) return;

    const container = scrollContainerRef.current as HTMLElement;
    // 获取视口可见区域的中心位置（相对于滚动容器）
    const viewportCenter = container.scrollTop + container.clientHeight / 2;

    // 找到包含视口中心的区块
    const targetSection = sectionElements.find(section => {
      const sectionTop = section.offsetTop;
      const sectionBottom = sectionTop + section.offsetHeight;
      return viewportCenter >= sectionTop && viewportCenter < sectionBottom;
    });

    // 如果找到目标区块，滚动到其顶部
    if (targetSection && targetSection !== currentSectionRef.current) {
      currentSectionRef.current = targetSection;
      container.scrollTo({
        top: targetSection.offsetTop,
        behavior: 'auto' // 立即滚动，避免动画干扰
      });
    }
  };

  // 防抖处理，延迟100ms执行，可根据需求调整
  const debouncedHandleResize = debounce(handleResize, 100);

  window.addEventListener('resize', debouncedHandleResize);
  return () => {
    window.removeEventListener('resize', debouncedHandleResize);
  };
}, [sectionElements]);

关键改进点 #

• 基于视口中心判断当前区块：不再依赖scrollTop，通过视口可见区域的中心位置确定应显示的区块，Resize时区块尺寸变化后，中心位置对应的区块更准确。
• 防抖处理：快速Resize时避免频繁触发滚动逻辑，减少错误跳转概率。
• 仅在区块变化时滚动：只有目标区块与当前记录区块不一致时才执行滚动，避免不必要的滚动操作。

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