通过为 `body` 和 `html` 元素添加 `overflow: hidden` 并配合 `position: fixed` 重置布局，可彻底阻止模态框开启时的水平滚动行为。
在水平滚动型网站（如使用 scroll-snap-type: x mandatory 或自定义横向滚动逻辑）中，模态框（modal）打开后仍允许用户通过鼠标滚轮、触控板或方向键进行水平滚动，这会破坏用户体验并导致内容错位。根本原因在于：仅设置 body { overflow: hidden } 通常不足以覆盖所有浏览器的默认滚动容器行为——部分浏览器（尤其是 chrome 和 safari）会将 html 元素作为根级滚动容器，当 body 被设为 position: fixed 时，其 width 和 height 可能脱离视口约束，反而触发 html 的水平溢出。
✅ 正确解决方案需双管齐下：
- 同时锁定 html 和 body 的溢出行为；
- 避免 position: fixed 引发的布局偏移问题（原方案中 body.modal-open { position: fixed } 会导致页面“跳动”，且可能意外暴露水平滚动条）；
- 确保模态框自身使用 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 + ←/→ 键验证水平滚动是否真正被拦截。
通过以上结构化处理，即可在保持原有水平滚动网站功能的同时，确保模态框期间用户无法意外触发横向位移，提升交互一致性与专业度。