通过为 `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免费学习笔记（深入）”；
