如何在小型设备上实现modal窗口（模态框）可滚动

问题描述 #

我无法在小型设备上实现modal窗口的滚动效果，点击页面上的“Scopri come”文本即可打开modal窗口。
我怀疑是JS代码存在问题，以下是使用的JS代码：

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

恳请各位帮忙排查问题，非常感谢。

排查修复方案 #

你提供的JS逻辑没有问题，modal在小型设备无法滚动的故障点基本都在CSS配置上，可按照以下顺序排查修复：

• 检查modal外层容器的overflow配置
  给modal外层元素添加固定定位与纵向滚动属性，示例配置如下：

#myModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  z-index: 9999;
  /* 保留原有背景色、边距等其他配置 */
}

• 检查modal内容容器的高度限制
  如果modal的内容放在单独的内层容器中，需要给内层容器设置最大高度与滚动属性，避免内容溢出后无法滚动：

.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  /* 保留原有内边距、背景色等其他配置 */
}

• 检查全局touch事件与body滚动限制
  不要为了禁止底层页面滚动就全局拦截touchmove事件，只需要在打开modal时给body添加overflow: hidden属性，关闭modal时移除该属性即可，避免误拦截modal自身的滚动事件。
• 检查z-index层级配置
  确认modal的z-index值高于页面所有其他元素，避免被上层透明元素拦截触摸操作导致无法滚动。

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