本文详解如何修复水平滚动容器导致页面无法垂直回滚的问题，通过智能判断滚动方向与边界状态，仅在安全范围内拦截 wheel 事件，确保用户既能左右滑动内容，又能正常上下滚动页面。
本文详解如何修复水平滚动容器导致页面无法垂直回滚的问题，通过智能判断滚动方向与边界状态，仅在安全范围内拦截 wheel 事件，确保用户既能左右滑动内容，又能正常上下滚动页面。
在实现自定义水平滚动（如使用 scrollLeft 响应鼠标滚轮）时，一个常见却容易被忽视的问题是：全局垂直滚动失效——用户滚动到 .info 区域后，无论向上还是向下滚动，页面都卡在当前视口，无法回到顶部或继续浏览后续内容。根本原因在于原始代码中无条件调用 evt.preventDefault()，它不仅阻止了水平方向的默认滚动行为，也意外屏蔽了文档层级的垂直滚动事件传播，导致
或 失去响应能力。要解决该问题，关键在于 “条件式拦截”：仅当用户意图在 .info 容器内进行有效水平滚动时才阻止默认行为；一旦到达最左/最右边界，或滚动方向与当前可滚动状态冲突，则放行事件，使浏览器恢复原生垂直滚动。
以下是优化后的核心 JavaScript 逻辑：
const scrollContainer = document.querySelector(".info");
scrollContainer.addEventListener("wheel", (evt) => {
// 判断滚动方向：deltaY > 0 表示向下滚动（常规水平右移映射）
const scrollingDown = evt.deltaY > 0;
// 判断是否已滚动至最右端：scrollWidth ≤ scrollLeft + offsetWidth
const isAtEnd = scrollContainer.scrollWidth <= (scrollContainer.scrollLeft + scrollContainer.offsetWidth);
// ✅ 允许滚动的两种情况：
// 1. 向下滚且未到右边界 → 可右移
// 2. 向上滚且未在最左端（scrollLeft !== 0）→ 可左移
if ((scrollingDown && !isAtEnd) || (!scrollingDown && scrollContainer.scrollLeft !== 0)) {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
}
// ❌ 其他情况（如向上滚但已在最左 / 向下滚但已到最右）不拦截，交还给浏览器处理垂直滚动
});该逻辑具备以下优势：
- 精准控制：仅拦截真正需要水平响应的 wheel 操作，避免“一刀切”式阻止；
- 自然回退：当用户在最左端向上滚动，或最右端向下滚动时，事件透传至 ，触发标准垂直滚动；
- 无障碍友好：不破坏键盘导航（如 PageUp/PageDown）、触摸板惯性滚动等原生行为；
- 零依赖：纯原生 JS 实现，无需第三方库。
⚠️ 注意事项：
- 确保 .info 元素设置了 overflow-x: hidden（已存在），否则可能出现双滚动条；
- 若页面存在多个滚动容器，需为每个容器单独绑定带边界判断的监听器，避免逻辑耦合；
- 在 Safari 中，wheel 事件的 deltaY 符号可能与 Chrome/Firefox 一致，但建议始终以 evt.deltaY > 0 作为“向下的物理滚动”语义，而非假设其代表“向右”；
- 如需支持触摸板横向滚动（macOS 默认启用），可额外监听 touchmove 并结合 gesturestart 进行手势识别，但本方案聚焦于基础 wheel 场景。
总结来说，修复的核心不是“增强水平滚动”，而是尊重浏览器默认滚动机制的优先级。通过边界感知 + 方向判断，让自定义行为成为原生体验的补充，而非替代。这样既保留了沉浸式水平浏览效果，又不牺牲页面基本可用性——这才是专业级交互设计的底层逻辑。
