如何在 JavaScript 模态框打开时禁用页面水平滚动

通过为 `html` 和 `body` 元素添加 `overflow: hidden` 并确保模态框自身使用 `position: fixed`，可彻底阻止模态框激活时的水平（及垂直）滚动行为。

在水平滚动型网站中，模态框（modal）打开后仍允许用户通过鼠标滚轮或触控板进行水平滚动，这通常是因为 overflow: hidden 仅作用于 body 时无法覆盖根元素（html）的默认滚动行为——尤其当页面本身依赖 scrollLeft 或 css scroll-snap 实现横向滚动时，html 元素会成为实际滚动容器。

✅ 正确做法是同时锁定 html 和 body 的溢出行为，并确保模态框脱离文档流：

/* 同时禁用 html 和 body 的滚动 */ html.modal-open, body.modal-open {   overflow: hidden;   /* 可选：重置滚动位置，避免因 modal 打开导致意外偏移 */   scroll-behavior: auto; }  /* 确保 modal 使用固定定位，不触发父容器滚动 */ .modal {   position: fixed;   top: 0;   left: 0;   width: 100vw;   height: 100vh;   z-index: 1050; /* bootstrap 标准层级，确保覆盖内容 */ }

⚠️ 注意事项：

• 仅设 body { overflow: hidden } 不够：在多数浏览器中，html 是视口滚动的根容器，尤其在横向滚动布局下（如 white-space: nowrap + overflow-x: auto 的容器），html 仍可滚动。
• 避免 position: fixed 导致的 body 跳动：原代码中 body.modal-open { position: fixed } 是错误方案——它会使页面重排、丢失原有滚动位置，且可能引发视觉抖动。应只加 overflow: hidden，不改 position。
• javaScript 需同步切换 class：需在显示/隐藏模态框时动态控制 html 和 body 的 modal-open 类：

const modal = document.getElementById("myModals"); const btn = document.getElementById("myBtns"); const span = document.querySelector(".closes");  btn.onclick = function() {   modal.style.display = "block";   document.documentElement.classlist.add("modal-open");   document.body.classList.add("modal-open"); };  span.onclick = function() {   modal.style.display = "none";   document.documentElement.classList.remove("modal-open");   document.body.classList.remove("modal-open"); };  window.onclick = function(event) {   if (event.target === modal) {     modal.style.display = "none";     document.documentElement.classList.remove("modal-open");     document.body.classList.remove("modal-open");   } };

? 进阶建议：若使用现代框架（如 react/vue），推荐封装为受控 Hook/Composable；若需兼容 ios safari，可额外添加 touch-action: none 到 .modal 防止手势穿透。最终效果是：模态框打开时，无论鼠标滚轮、触控板还是键盘 ←→ 键，均无法触发页面水平位移。

立即学习“Java免费学习笔记（深入）”；