如何让<dialogue />模态框阻止页面主体内容滚动？

嗨，我之前也碰到过这个糟心的问题！明明模态框都铺满整个视口了，底下的页面内容还能偷偷滚动，体验感瞬间就差了😤。给你几个实用的解决办法，都是我亲测有效的：

• 手动控制body的滚动状态：在模态框显示时，给页面的body元素设置overflow: hidden，这样就能直接锁住页面滚动；等模态框关闭的时候再把这个样式去掉，恢复正常滚动。
  你可以修改你的useEffect代码，加上这部分逻辑：

  useEffect(() => {
    // 先保存body原来的overflow样式，避免覆盖原有设置
    const originalBodyOverflow = document.body.style.overflow;
    if (modal_ref.current) {
      modal_ref.current.showModal();
      // 锁住body滚动
      document.body.style.overflow = 'hidden';
    }
  
    // 清理函数：当组件卸载或者foc状态变化时，恢复body的滚动状态
    return () => {
      document.body.style.overflow = originalBodyOverflow;
      // 顺便关闭模态框（如果需要的话）
      if (modal_ref.current) {
        modal_ref.current.close();
      }
    };
  }, [foc]);
  

• 给自定义模态框加内部滚动支持：如果你的组件内部有长内容需要滚动，记得给模态框本身设置overflow: auto和max-height: 100vh，这样模态框里的内容能正常滚动，外面的页面还是被牢牢锁住。

• 检查原生

  的特殊情况：要是你其实用的是原生HTML的<dialog>标签（可能不小心写成了<dialogue>），正常调用showModal()后浏览器会自动禁止页面滚动的。如果没生效，大概率是你的全局CSS里有高优先级的样式覆盖了这个默认行为，这时候用上面手动设置body overflow的方法兜底就好。

内容来源于stack exchange