实现水平滚动时保留垂直滚动能力的完整解决方案

本文提供一个健壮的水平滚动 javascript 实现，通过智能判断滚动方向与边界状态，确保用户既能向右滑动浏览内容，也能向上滚动返回顶部初始区域。

在实现自定义水平滚动（如 .info 区域）时，一个常见却容易被忽视的问题是：全局 wheel 事件被无条件 preventDefault() 后，会彻底禁用页面的垂直滚动能力——导致用户无法再向上滚动回到顶部的 .container 区域。

根本原因在于原始代码中：

scrollContainer.addEventListener("wheel", (evt) => {
  evt.preventDefault(); // ❌ 无差别阻止所有滚轮事件
  scrollContainer.scrollLeft += evt.deltaY;
});

这会让浏览器认为“所有滚轮操作都已由 JS 处理”，从而放弃默认的文档级垂直滚动行为，即使用户正试图向上滚动（evt.deltaY

✅ 正确做法是：仅在水平滚动有意义时拦截事件，其余情况放行，交还给浏览器处理原生垂直滚动。

以下是优化后的核心逻辑：

const scrollContainer = document.querySelector(".info");

scrollContainer.addEventListener("wheel", (evt) => {
  // 判断滚动方向：向下滚动（+）→ 向右；向上滚动（−）→ 向左
  const scrollingDown = evt.deltaY > 0;

  // 判断是否已达右边界（无法再向右滚动）
  const isAtEnd = scrollContainer.scrollWidth <= scrollContainer.scrollLeft + scrollContainer.offsetWidth;

  // ✅ 仅当满足以下任一条件时才执行水平滚动并阻止默认行为：
  //   • 向下滚动 且 未到右边界 → 可向右滚动
  //   • 向上滚动 且 未到左边界（scrollLeft > 0）→ 可向左滚动
  if ((scrollingDown && !isAtEnd) || (!scrollingDown && scrollContainer.scrollLeft > 0)) {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
  }
  // ❌ 其他情况（如向上滚动但已到最左，或向下滚动但已到最右）不调用 preventDefault()
  // → 浏览器将自动触发页面垂直滚动，用户可顺利返回顶部
});

? 关键要点说明：

• scrollContainer.scrollLeft > 0 比 !== 0 更稳妥（避免浮点误差），精准表示“尚未归位到起点”；
• 边界检测使用 scrollWidth
• 无需额外监听 scroll 或 resize 事件——该逻辑在每次 wheel 触发时动态计算，天然响应布局变化。

? 进阶建议（可选增强）：

• 添加 passive: false 显式声明（尽管现代 Chrome 默认为 false），提升兼容性：

  scrollContainer.addEventListener("wheel", handler, { passive: false });

• 若需支持触控板惯性滚动，可结合 scroll-behavior: smooth 与 CSS scroll-snap-type 提升体验；
• 对于键盘导航（如 ArrowLeft/ArrowRight），建议补充 keydown 监听以保持无障碍一致性。

通过这一改进，.info 区域获得可控的水平浏览能力，同时完全不干扰页面整体的垂直滚动流——用户可自由上下穿梭于标题区与横向内容区之间，真正实现「水平滚动不锁死页面」的用户体验目标。