Modal对话框关闭后页面滚动条消失怎么办？

Dev · 玉轩提问于 2026-02-28 19:15:21 阅读 14

组件

我在用React写一个Modal组件，弹出时body加了overflow:hidden防止背景滚动，但关闭Modal后页面的滚动条就没了，内容还向左偏移了一点，看起来特别别扭。

我试过在useEffect里加回overflow: auto，但有时候还是不生效，尤其是在快速打开关闭的时候。有没有靠谱的处理方式？

useEffect(() => {
  if (isOpen) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = 'auto';
  }
}, [isOpen]);

Modal对话框反馈组件

我来解答赞 2 收藏

反馈

1 条解答

Newb.晨旭 Lv1

问题在于你没保存原始值，而且快速开关时cleanup没执行完。用空字符串恢复默认值，在cleanup里处理：

useEffect(() => {

  if (isOpen) {

    const original = document.body.style.overflow;

    document.body.style.overflow = 'hidden';

    return () => {

      document.body.style.overflow = original || '';

    };

  }

}, [isOpen]);

这样即使快速开关也能正确恢复，因为React保证cleanup在下一个effect前执行完。

2026-03-01 02:00