17370845950

通过为 `body` 和 `html` 元素添加 `overflow: hidden` 并配合 `position: fixed` 重置布局，可彻底阻止模态框开启时的水平滚动行为。

在水平滚动型网站（如使用 scroll-snap-type: x mandatory 或自定义横向滚动逻辑）中，模态框（modal）打开后仍允许用户通过鼠标滚轮、触控板或方向键进行水平滚动，这会破坏用户体验并导致内容错位。根本原因在于：仅设置 body { overflow: hidden } 通常不足以覆盖所有浏览器的默认滚动容器行为——部分浏览器（尤其是 Chrome 和 Safari）会将 html 元素作为根级滚动容器，当 body 被设为 position: fixed 时，其 width 和 height 可能脱离视口约束，反而触发 html 的水平溢出。

✅ 正确解决方案需双管齐下：

1. 同时锁定 html 和 body 的溢出行为；
2. 避免 position: fixed 引发的布局偏移问题（原方案中 body.modal-open { position: fixed } 会导致页面“跳动”，且可能意外暴露水平滚动条）；
3. 确保模态框自身使用 position: fixed 并居中显示，不依赖 body 滚动状态。

以下是推荐的 CSS 实现：

/* 模态框开启时，全局禁用滚动（含水平与垂直） */
html.modal-open,
body.modal-open {
  overflow: hidden;
  /* 不要加 position: fixed！它会引发回流和视觉跳动 */
}

/* 确保模态框脱离文档流，固定于视口中央 */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050; /* Bootstrap 标准层级，确保高于其他内容 */
}

对应 JavaScript 需增强状态管理（修复原代码中未添加/移除 modal-open 类的问题）：

const modal = document.getElementById("myModals");
const btn = document.getElementById("myBtns");
const span = document.querySelector(".closes"); // 推荐用 querySelector 替代 getElementsByClassName[0]

// 打开模态框
btn.onclick = function() {
  modal.style.display = "block";
  document.documentElement.classList.add("modal-open");
  document.body.classList.add("modal-open");
};

// 关闭模态框（三处触发均需同步清理）
const closeModal = () => {
  modal.style.display = "none";
  document.documentElement.classList.remove("modal-open");
  document.body.classList.remove("modal-open");
};

span.onclick = closeModal;

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

⚠️ 注意事项：

• ❌ 避免对 body 设置 position: fixed —— 它会重置 body 的宽度计算，常导致右侧出现空白滚动区域（即“水平滚动条残留”）；
• ✅ 使用 document.documentElement（即 ）而非仅 document.body 添加类名，确保跨浏览器兼容性；
• ? 若网站本身依赖 body 的 overflow-x: scroll 实现横向滚动，请确认 .modal-open 规则的优先级足够高（可加 !important 临时调试，但建议通过更精确的选择器解决）；
• ? 测试建议：在 macOS 上用触控板双指左右滑动、Windows 上按 Shift + 鼠标滚轮，以及键盘 Shift + ←/→ 键验证水平滚动是否真正被拦截。

通过以上结构化处理，即可在保持原有水平滚动网站功能的同时，确保模态框期间用户无法意外触发横向位移，提升交互一致性与专业度。