本文详解如何修复水平滚动容器（.info）拦截鼠标滚轮事件后导致页面整体垂直滚动失效的问题，通过条件判断精准控制 preventDefault() 的触发时机，确保水平滚动与页面垂直导航共存。
本文详解如何修复水平滚动容器（`.info`）拦截鼠标滚轮事件后导致页面整体垂直滚动失效的问题，通过条件判断精准控制 preventdefault() 的触发时机，确保水平滚动与页面垂直导航共存。
在实现横向滚动效果时，一个常见但容易被忽视的陷阱是：无差别调用 evt.preventDefault() 会彻底禁用浏览器默认的垂直滚动行为，导致用户无法向上滚动回到初始内容区域（如顶部的 .container）。原始代码中：
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault(); // ❌ 问题根源：始终阻止默认行为
scrollContainer.scrollLeft += evt.deltaY;
});该逻辑将所有滚轮事件（无论向上/向下、是否在可滚动范围内）全部拦截，使整个页面失去垂直滚动能力。
✅ 正确解法：按需阻止，默认行为保留
核心思路是——仅在确实需要执行水平滚动时才阻止默认行为；其余情况（如已到最左端却向上滚、或已到最右端却向下滚）应放行，交由浏览器处理垂直滚动。
以下是优化后的 JavaScript 逻辑：
const scrollContainer = document.querySelector(".info");
scrollContainer.addEventListener("wheel", (evt) => {
const scrollingDown = evt.deltaY > 0; // true 表示向下滚动（意图向右）
const isAtEnd = scrollContainer.scrollWidth <= scrollContainer.scrollLeft + scrollContainer.offsetWidth;
const isAtStart = scrollContainer.scrollLeft === 0;
// ✅ 仅当满足以下任一条件时才执行水平滚动并阻止默认行为：
// - 向下滚动 且 未到达最右端 → 允许向右滑
// - 向上滚动 且 未到达最左端 → 允许向左滑
if ((scrollingDown && !isAtEnd) || (!scrollingDown && !isAtStart)) {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
}
// ⚠️ 其他情况（如向上滚但已在起点 / 向下滚但已达终点）不调用 preventDefault()
// → 浏览器自动恢复垂直滚动，用户可正常返回顶部
});? 关键判断说明
| 条件 | 含义 | 作用 |
|---|---|---|
| scrollingDown | evt.deltaY > 0 | 判断用户意图：正值 ≈ 向下滚 ≈ 想向右浏览更多内容 |
| isAtEnd | scrollWidth ≤ scrollLeft + offsetWidth | 检测是否已滚动至最右侧边界 |
| isAtStart | scrollLeft === 0 | 检测是否位于最左侧起始位置 |
该逻辑确保：
- 向右滚动时，若未达右边界 → 水平滚动生效；
- 向左滚动时，若未达左边界 → 水平滚动生效；
- 向左滚动但已在起点 → 不阻止默认行为 → 页面向上滚动；
- 向右滚动但已达终点 → 不阻止默认行为 → 页面向下滚动。
? 补充建议与注意事项
- 无障碍与键盘支持：当前方案仅解决鼠标滚轮问题。如需完整可访问性，建议额外支持 ArrowLeft/ArrowRight 键及 Home/End 键控制，并为 .info 添加 tabindex="0"。
- 触摸设备兼容性：移动端 wheel 事件不可靠，应结合 touchstart/touchmove 实现手势拖拽（可使用 Hammer.js 或原生 touch-action: pan-y CSS 属性辅助）。
-
性能优化：对高频 wheel 事件建议添加防抖（debounce）或使用 passive: false 显式声明（Chrome 要求）：
scrollContainer.addEventListener("wheel", handler, { passive: false }); - CSS 注意事项：确保 .info 元素具有明确宽度和 overflow-x: hidden，且子元素 .content 使用 min-width: 100vw 实现横向铺满，避免布局塌陷影响滚动计算。
通过上述改进，你既能保留流畅的横向浏览体验，又不会牺牲页面最基本的垂直导航能力——真正实现「水平滚动不抢权，垂直滚动随时回」的用户体验平衡。
