如何在限制页面溢出时确保滑入式弹窗正常显示？

问题根源 #

你之前的代码html, body { overflow-y: hidden; }存在两个核心问题：

• 直接禁用了垂直滚动，导致弹窗若超出当前视口范围，会被卡在页面下方，必须滚动到底部才能看到；
• overflow-y: hidden会裁剪body内部超出视口的内容，若弹窗未使用脱离文档流的定位，就会被页面其他内容遮挡。

正确解决方案 #

1. 仅禁用水平滚动，保留垂直滚动

不要用overflow-y: hidden，针对水平方向设置溢出隐藏即可，同时确保页面宽度不会超出视口：

html, body {
  width: 100%;
  overflow-x: hidden;
  /* 移除overflow-y:hidden，保留垂直滚动功能 */
}

2. 确保弹窗的定位与层级优先级

弹窗必须使用脱离文档流的定位（fixed 或 absolute），并设置足够高的层级，保证它显示在所有内容之上：

.modal {
  position: fixed; /* 相对于视口定位，不受页面滚动影响 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* 数值足够大，超过页面其他元素的z-index */
  /* 你的左右滑入动画样式 */
}

如果弹窗是从侧边滑入，fixed定位能让它始终处于视口范围内，不会被overflow-x: hidden裁剪。

3. 预防内容溢出的额外优化

如果页面元素仍出现水平溢出，全局设置box-sizing: border-box，避免margin/padding撑大元素宽度：

* {
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Jakub Bizoń