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

FSD-慧研提问于 2026-03-11 16:15:19 阅读 8

交互

我在项目里用原生JS写了个Modal弹窗，打开时给body加了overflow: hidden防止背景滚动，但关闭后页面的滚动条就没了，刷新才恢复，这咋办？

试过在关闭时移除样式，但有时候还是不行，特别是iOS Safari上更明显。这是我的关键代码：

function openModal() {
  document.body.style.overflow = 'hidden';
  modal.classList.add('show');
}

function closeModal() {
  document.body.style.overflow = ''; // 这样写有问题吗？
  modal.classList.remove('show');
}

我来解答赞 2 收藏

反馈

1 条解答

UP主～慧娜 Lv1

这个问题挺常见的，根源在于你直接清空 overflow，但浏览器不一定会把它恢复成原来的值，特别是 iOS Safari 上问题更明显。

问题在于：当你设置 overflow: hidden 时，有些浏览器（尤其 iOS Safari）会直接禁用整个页面的滚动能力，清空样式后它不一定记得原来是什么状态。

解决办法是保存原始值，关闭时恢复它：

let originalOverflow = '';



function openModal() {

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

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

  modal.classList.add('show');

}



function closeModal() {

  document.body.style.overflow = originalOverflow;

  modal.classList.remove('show');

}

但这只是基础版，iOS Safari 上还得处理 document.documentElement，因为有些情况下 body 的 overflow 不起作用：

function openModal() {

  originalOverflow = getComputedStyle(document.body).overflow;

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

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

}



function closeModal() {

  document.body.style.overflow = originalOverflow;

  document.documentElement.style.overflow = originalOverflow;

}

如果你项目里经常用到弹窗，建议直接用 class 来控制，别直接改 style。比如：

body.modal-open {

  overflow: hidden;

}

function openModal() {

  document.body.classList.add('modal-open');

}



function closeModal() {

  document.body.classList.remove('modal-open');

}

这样干净省心，浏览器会自己处理恢复的问题。原生 JS 写弹窗确实要考虑这些兼容性问题，够烦的。

2026-03-11 16:40