React应用设置overflow后scrollTo、react-scroll滚动失效如何解决？

你设置.App类的height: 100vh + overflow-y: scroll后，页面滚动容器从默认的window对象变成了.App DOM节点，所有针对window的滚动操作自然不会生效。

以下方案均不需要移除原有overflow样式，可对应你之前尝试的实现方式选择：

方案1：适配原有window.scrollTo写法 #

不需要大改逻辑，只要把滚动操作的对象从window换成.App节点即可：

import { useRef } from 'react';

function App() {
  // 新增App容器ref
  const appContainerRef = useRef(null);
  const scrollSection = useRef(null);

  const goToSection = () => {
    // 把window替换为App容器的ref
    appContainerRef.current.scrollTo({
      // 注意你原有代码里scrollTO是拼写错误，正确写法为全小写scrollTo
      top: scrollSection.current.offsetTop,
      behavior: "smooth"
    });
  };

  return (
    // 给App根节点绑定ref
    <div className="App" ref={appContainerRef}>
      {/* 你的页面内容 */}
      <div ref={scrollSection}>目标滚动区域</div>
    </div>
  )
}

方案2：使用scrollIntoView（更简单，无需获取父容器ref） #

scrollIntoView会自动向上查找最近的可滚动父容器执行滚动，不需要手动获取.App节点：

const goToSection = () => {
  scrollSection.current.scrollIntoView({
    behavior: "smooth",
    block: "start" // 滚动到目标区域顶部，可根据需求调整为center/end
  })
}

方案3：适配react-scroll库 #

只需给react-scroll指定滚动容器为.App节点即可：

1. 先给.App节点加唯一ID

<div className="App" id="appScrollContainer">
  {/* 页面内容 */}
</div>

2. 给Link组件新增containerId属性，值为上面设置的ID

<Link 
  to="firstSection" 
  spy={true} 
  smooth={true}
  containerId="appScrollContainer"
>
  <li>跳转按钮</li>
</Link>

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