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

问题在于你直接清空字符串，但body原本可能有CSS设置的overflow值，或者页面原本就没有滚动条（overflow已经是hidden）。

正确做法是保存原始状态再恢复：

let scrollPosition = 0;



function openModal() {

  // 保存滚动位置

  scrollPosition = window.pageYOffset;

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

  document.body.style.position = 'fixed';

  document.body.style.top = -${scrollPosition}px;

  document.body.style.width = '100%';

  modal.classList.add('show');

}



function closeModal() {

  document.body.style.overflow = '';

  document.body.style.position = '';

  document.body.style.top = '';

  document.body.style.width = '';

  // 恢复滚动位置

  window.scrollTo(0, scrollPosition);

  modal.classList.remove('show');

}

为什么这么搞：
- 直接设overflow为空字符串不可靠，因为你不知道页面原本有没有滚动条
- iOS Safari的问题是设了overflow: hidden页面依然能滚，所以加上position: fixed来彻底锁死
- 锁死后页面会跳回顶部，所以要保存scrollPosition，关闭时再手动移回去

复制过去试试，基本主流浏览器都能搞定。

这个问题挺常见的，根源在于你直接清空 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 写弹窗确实要考虑这些兼容性问题，够烦的。