如何点击Tab滚动列表时禁止浏览器窗口滚动？

问题场景 #

已实现Tab与滚动分段的关联功能：点击Tab时，列表会滚动到对应分段，但同时浏览器窗口会自动滚动到列表所在div的顶部，需要实现仅列表内部滚动，页面整体保持不动的效果。

解决方案 #

核心原因是直接调用目标元素的scrollIntoView()会默认让元素在整个浏览器视口中可见，导致页面视口滚动。改用操作列表容器的滚动位置即可解决：

步骤1：给可滚动列表容器添加ref #

先给包裹分段的滚动容器设置ref，确保容器已开启垂直滚动（通过overflowY: auto和固定高度）：

const scrollContainerRef = useRef();

// 滚动容器示例
<div 
  ref={scrollContainerRef} 
  style={{ 
    overflowY: 'auto', 
    height: '500px', // 根据需求设置固定高度
    position: 'relative' // 可选，确保偏移计算准确
  }}
>
  {/* 各个分段元素 */}
  <div ref={sect1}>Section 1 内容</div>
  <div ref={sect2}>Section 2 内容</div>
  {/* 更多分段... */}
</div>

步骤2：修改滚动处理函数，操作容器的scrollTop #

放弃直接调用目标元素的scrollIntoView()，改为计算目标元素相对于容器的偏移，然后设置容器的scrollTop：

const [current, setCurrent] = React.useState('one');    

const handlerScroll = (targetRef, currentTab) => {
  setCurrent(currentTab);
  const container = scrollContainerRef.current;
  const targetElement = targetRef.current;

  if (container && targetElement) {
    // 计算目标元素相对于容器顶部的偏移量
    const targetOffset = targetElement.offsetTop - container.offsetTop;
    // 平滑滚动容器到目标位置
    container.scrollTo({
      top: targetOffset,
      behavior: 'smooth'
    });
  }
};

步骤3：保持Tab的点击逻辑不变 #

原Tab的点击调用无需修改，依然传递对应分段的ref：

<Tab 
  value="one" 
  active={current === 'one'} 
  onClick={() => handlerScroll(sect1, 'one')}
>
  Section1
</Tab>

原理说明 #

通过直接控制滚动容器的scrollTop值，仅操作容器内部的滚动位置，不会触发浏览器视口的滚动行为，完美实现“点击Tab仅列表内部滚动，页面不动”的需求。

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