React+Tailwind弹窗打开时如何阻止页面滚动并保持原位置？

问题描述 #

使用React + Tailwind构建网站时，需要实现点击导航栏图标弹出搜索弹窗，要求弹窗打开时：

1. 阻止页面滚动
2. 保持当前页面滚动位置不变

尝试修改body/html的overflow:hidden属性遇到以下问题：

• 仅设置overflow:hidden：滚动条隐藏，但鼠标滚轮仍能触发页面滚动
• 添加height:100%：能阻止滚动，但页面会直接跳转到顶部

问题解答 #

1. 为什么设置overflow:hidden后仍能后台滚动？ #

核心原因是浏览器的滚动容器逻辑：

• 多数现代浏览器中，页面的滚动行为实际上由根元素（html）控制，而非body。仅给body设置overflow:hidden无法阻断根元素的滚动。
• 即使同时给html和body设置overflow:hidden，部分浏览器（如Chrome）在页面内容高度超过视口时，仍会保留底层的滚动上下文，滚轮事件依然能触发页面滚动。

2. 若使用height:100%，如何避免页面跳顶？ #

页面跳顶的本质是：给html/body设置height:100%后，元素高度被限制为视口高度，浏览器会自动重置滚动条到顶部。解决思路是先记录滚动位置，再通过固定定位锁定页面：

• 打开弹窗时，保存当前滚动距离window.scrollY
• 给body设置position:fixed + top: -${scrollY}px，既固定页面位置，又阻止滚动
• 关闭弹窗时，恢复body样式并调用window.scrollTo还原滚动位置

3. 更可靠的替代方案 #

推荐使用固定定位锁定body的方案，比修改overflow和height更稳定，不会出现跳顶问题。也可以选择事件监听阻止滚动的方案：

• 弹窗打开时，给window添加wheel、touchmove事件监听，调用event.preventDefault()阻止默认滚动行为
• 弹窗关闭时，移除对应的事件监听
• 注意：该方案需要处理事件冒泡，且要兼容移动端的触摸滚动事件

修改后的代码示例 #

header.tsx #

export const Header = ({
}: HeaderProps) => {
 
  const [isSearchOpened, setIsSearchOpened] = React.useState(false);
  const [scrollPosition, setScrollPosition] = React.useState(0);

  const handleSearchOpen = () => {
    // 保存当前滚动位置
    const currentScroll = window.scrollY;
    setScrollPosition(currentScroll);
    // 锁定body位置并阻止滚动
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.top = `-${currentScroll}px`;
    document.body.style.overflow = 'hidden';
    setIsSearchOpened(true);
  };

  const handleSearchClose = () => {
    // 恢复body默认样式
    document.body.style.position = '';
    document.body.style.width = '';
    document.body.style.top = '';
    document.body.style.overflow = '';
    // 还原之前的滚动位置
    window.scrollTo(0, scrollPosition);
    setIsSearchOpened(false);
  };

  return (
    <>
      <div className='relative'>
        {isSearchOpened && <SearchBar onClose={handleSearchClose} />}
      </div>
      <nav>
        <div>Other things....</div>
        <BsSearch
          className='cursor-pointer text-white hover:text-green'
          size={20}
          onClick={handleSearchOpen}
        />
      </nav>
    </>
  );
};

globals.css #

可以删除原有的.searchInView类，因为现在通过内联样式处理滚动锁定逻辑。

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