开启JavaScript模态框时如何用CSS禁止水平滚动？

针对横向滚动网站中，模态框开启后仍能通过鼠标滚轮横向滚动的问题，你可以尝试以下几种可行方案：

方案1：精准控制滚动载体的overflow属性 #

如果你的横向滚动是通过某个特定容器（而非body）实现的，需要将禁用滚动的类加到该容器上，而非body。假设你的滚动容器类名为.horizontal-scroll-container：

修改CSS #

/* 禁用容器横向滚动 */
.horizontal-scroll-container.modal-open {
  overflow-x: hidden;
  position: relative; /* 避免fixed导致布局偏移，可根据需求调整 */
  width: 100%;
}

/* 如果是body作为滚动载体，调整原有代码 */
body.modal-open {
  overflow-x: hidden;
  position: fixed;
  width: 100%; /* 防止fixed后宽度收缩 */
}

修改JavaScript #

在模态框开启/关闭时，给滚动载体添加/移除modal-open类：

var modal = document.getElementById("myModals");
var btn = document.getElementById("myBtns");
var span = document.getElementsByClassName("closes")[0];
// 替换成你的滚动容器选择器，比如document.body或document.querySelector('.horizontal-scroll-container')
var scrollContainer = document.body;

// 封装关闭模态框的逻辑
function closeModal() {
  modal.style.display = "none";
  scrollContainer.classList.remove("modal-open");
}

btn.onclick = function() {
  modal.style.display = "block";
  scrollContainer.classList.add("modal-open");
};

span.onclick = closeModal;

window.onclick = function(event) {
  if (event.target == modal) {
    closeModal();
  }
};

方案2：阻止滚轮事件冒泡 #

如果用户滚动模态框区域时触发了页面的横向滚动，可以直接在模态框上阻止滚轮事件向上冒泡：

// 在原有JS代码中添加这一行
modal.addEventListener('wheel', function(e) {
  e.stopPropagation();
});

方案3：锁定鼠标滚轮的横向滚动 #

如果上述方案仍无效，可以通过JS直接阻止滚轮的横向滚动行为（仅在模态框开启时生效）：

var wheelHandler = function(e) {
  // 阻止横向滚动（deltaX对应横向滚轮值）
  if (e.deltaX !== 0) {
    e.preventDefault();
  }
};

btn.onclick = function() {
  modal.style.display = "block";
  window.addEventListener('wheel', wheelHandler);
};

function closeModal() {
  modal.style.display = "none";
  window.removeEventListener('wheel', wheelHandler);
}

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