本文提供一个健壮的水平滚动 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 区域获得可控的水平浏览能力，同时完全不干扰页面整体的垂直滚动流——用户可自由上下穿梭于标题区与横向内容区之间，真正实现「水平滚动不锁死页面」的用户体验目标。
