CSS overflow致屏幕宽度异常，模态框居中问题如何解决？

问题原因 #

你推测的没错，问题核心在于modal-container的overflow: scroll属性：

• 当页面原本存在垂直滚动条时，浏览器会为设置了overflow: scroll的modal-container额外生成滚动条，挤占容器宽度。
• main元素的宽度计算基于原页面可视区域（已扣除主滚动条宽度），而modal-wrapper的calc(100% - 3.125rem)基于modal-container的宽度（包含滚动条占位），两者宽度基准不一致，导致视觉上未对齐居中。
• 原代码中modal-wrapper设置了pointer-events: none，会导致模态框内容无法交互，这也是需要修正的问题。

解决方案 #

步骤1：修正滚动与交互属性

修改CSS，调整模态框容器的滚动行为，修复交互问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  width: min(calc(100% - 3.125rem), 45.625rem);
  height: 200vh;
  position: relative;
  left: 50%;
  transform: translate(-50%, -5%);
  background-color: aqua;
}
.modal-container {
  position: fixed;
  inset: 0;
  padding: 20vh 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  /* 替换overflow:scroll为overflow-y:auto，仅内容超出时显示垂直滚动条 */
  overflow-y: auto;
  pointer-events: none;
  transition: 200ms;
}
.modal-container.show {
  opacity: 1;
  /* 显示模态框时恢复交互 */
  pointer-events: auto;
}
.modal-wrapper {
  width: min(calc(100% - 3.125rem), 45.625rem);
  height: 150vh;
  margin: auto;
  padding: 1.75rem 1.25rem;
  /* 恢复模态框内容的交互能力 */
  pointer-events: auto;
  transition: 200ms;
  border-radius: 0.5rem;
  background-color: aquamarine;
}
/* 添加隐藏主页面滚动条的样式 */
body.show-modal {
  overflow: hidden;
}

步骤2：更新JS逻辑，控制主页面滚动

修改点击事件，打开模态框时隐藏主页面滚动条，确保宽度基准一致：

const modalBtn = document.querySelector("button");
const modalContainer = document.querySelector(".modal-container");

modalBtn.addEventListener("click", () => {
  modalContainer.classList.add("show");
  document.body.classList.add("show-modal");
});

// 可选：添加关闭模态框逻辑（点击遮罩关闭）
modalContainer.addEventListener("click", (e) => {
  if (e.target === modalContainer) {
    modalContainer.classList.remove("show");
    document.body.classList.remove("show-modal");
  }
});

效果说明 #

• 打开模态框时，主页面滚动条被隐藏，modal-container宽度与原页面可视区域一致，modal-wrapper的宽度计算会和main完全对齐，实现精准居中。
• 使用overflow-y: auto替代overflow: scroll，避免了不必要的水平滚动条，同时保证内容超出时可正常垂直滚动。
• 修复了pointer-events属性，模态框内容可正常交互。

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