如何实现可滚动Pop-up弹窗解决移动端弹窗滚动异常

AI 小北

2026-8-29

可滚动弹窗移动端适配修复

问题原因

现有代码存在3个直接导致移动端弹窗无法滚动、内容被裁剪的问题：

内容区设置的max-height: 30%为相对父元素的百分比值，但父元素.popup高度由内容撑开，没有明确高度参照，该属性实际失效
全屏遮罩层.overlay未配置滚动属性，内容溢出后滚动事件直接透传到背后的页面
弹窗固定margin:70px、宽度未做盒模型适配，小屏场景下容易直接溢出视口边界被裁剪

完整修复代码

调整后CSS

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  /* 新增：遮罩层支持纵向滚动 */
  overflow-y: auto;
  /* 新增：解决iOS端滚动卡顿问题 */
  -webkit-overflow-scrolling: touch;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  /* 调整固定边距为适配小屏的尺寸 */
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  /* 新增：限制大屏下弹窗最大宽度 */
  max-width: 600px;
  /* 新增：内边距纳入宽度计算，避免宽度溢出 */
  box-sizing: border-box;
}


.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .content {
  /* 替换失效的百分比高度，基于视口计算内容区最大高度 */
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  /* 适配iOS滚动流畅度 */
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 700px){
  .popup{
    width: 90%;
    margin: 15px auto;
  }
  .popup .content {
    max-height: calc(100vh - 150px);
  }
}