本文提供一种健壮的水平滚动交互方案，通过智能判断滚轮方向与容器边界状态，确保用户既能向右水平浏览内容，也能随时向上滚动回到顶部初始区域。
在实现横向滚动（horizontal scroll）效果时，一个常见但易被忽视的问题是：禁用默认垂直滚动后，用户无法再向上滚动页面回到顶部区域。根本原因在于原始代码中对所有 wheel 事件统一调用了 evt.preventDefault()，这不仅阻止了垂直滚动，还导致浏览器失去对页面整体滚动位置的控制权。
✅ 正确做法：条件化拦截，保留垂直滚动能力
核心思路是——仅在必要时拦截滚轮事件：当用户向下滚动（deltaY > 0）且尚未到达水平容器最右端时，执行水平滚动；当用户向上滚动（deltaY 0）时，才允许水平反向滚动；其余情况（如已到起点仍向上滚、或已到终点仍向下滚）则不调用 preventDefault()，从而将滚动行为交还给浏览器，使其可自然触发页面级垂直滚动。
以下是优化后的 JavaScript 逻辑：
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 → 浏览器接管垂直滚动
});⚠️ 关键注意事项
- scrollWidth 与 offsetWidth 的精度依赖：确保 .info 容器及其子元素（.content）已完全渲染完成后再绑定事件。若内容动态加载，建议在 DOMContentLoaded 或 window.onload 后执行。
- 移动端兼容性：该方案主要面向桌面端滚轮交互。如需支持触摸板/触屏横向拖拽，应额外集成 touchstart/touchmove 事件或使用 draggable + CSS scroll-snap 等现代方案。
- 无障碍与键盘导航：纯 JS 水平滚动可能影响键盘 Tab 导航与屏幕阅读器体验。建议为 .content 添加 tabindex="0" 并配合 aria-label 提升可访问性。
- 性能优化：高频 wheel 事件建议添加 passive: false 显式声明（已隐含在 preventDefault() 使用中），避免浏览器警告；如需更高性能，可考虑节流（throttle）处理，但本例中因仅做简单位移，通常无需。
? 进阶建议：渐进增强与回退方案
为兼顾兼容性与体验，推荐采用 CSS 原生 scroll-snap-type 作为基础布局，JS 仅用于增强滚轮行为：
.info {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.content {
scroll-snap-align: start;
/* ...其余样式保持不变 */
}这样即使 JS 失效，用户仍可通过滚动条或触摸拖拽正常浏览，真正实现“优雅降级”。
通过以上改进，你将获得一个既流畅又符合用户直觉的水平滚动体验——向右探索内容，向上回归首页，一切自然如初。
