17370845950

本文解决水平滚动容器中无法向上滚动返回起始位置的问题，通过判断滚动方向与边界状态，精准控制 `scrollleft` 变化，确保用户既能向右浏览内容，也能顺畅向左返回起点。

在实现自定义水平滚动（如使用 wheel 事件监听并修改 scrollLeft）时，一个常见陷阱是：无条件执行 scrollLeft += evt.deltaY 会导致滚动“卡死”在最左或最右端——尤其当用户试图向上滚动（即 deltaY 浏览器可能因事件被持续拦截而失去垂直滚动能力，导致无法返回上方的 .container 区域。

根本原因在于：原始代码中 evt.preventDefault() 总是被调用，且 scrollLeft 被强制累加 evt.deltaY（一个负值），但未检查是否已达左边界（scrollLeft === 0）。这不仅造成无效操作，更关键的是——它劫持了所有 wheel 事件，使页面丧失原生垂直滚动能力，用户因此“被困”在 .info 区域，无法向上滚动回到顶部 .container。

✅ 正确解法是：仅在安全范围内允许水平滚动，并将其他情况交还给浏览器处理。以下是优化后的核心逻辑：

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

scrollContainer.addEventListener("wheel", (evt) => {
  const scrollingDown = evt.deltaY > 0; // 向下滚动 → 向右滑动
  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 判断用户意图：deltaY > 0 表示鼠标滚轮向下（常规理解为“前进”），对应向右滚动；反之则向左。
• isAtEnd 使用 scrollWidth
• isAtStart 直接判断 scrollLeft === 0，确保左边界精准可控。
• 不调用 preventDefault() 的场景会被浏览器接管，恢复原生垂直滚动，这是实现“可返回顶部”的技术核心。

? 额外建议：

• 为提升体验，可添加 scroll-behavior: smooth 到 .info，让水平滚动更流畅；
• 若需支持触摸板惯性滚动，建议结合 touch-action: none（谨慎使用，需确保不影响其他交互）；
• 在真实项目中，建议对 scrollContainer 做存在性校验，避免脚本报错：if (!scrollContainer) return;。

通过该方案，用户既能通过滚轮左右浏览 .content 序列，又能在任意时刻向上滚动，无缝返回顶部 .container 区域——真正实现水平滚动与页面整体垂直导航的和谐共存。