本文介绍如何通过监听 wheel 事件，实现当鼠标悬停在具有垂直滚动的子容器上时优先触发其纵向滚动；仅当子容器已滚动至顶部或底部时，才将滚轮事件“透传”给父容器执行水平滚动，从而提供自然、符合直觉的嵌套滚动体验。
本文介绍如何通过监听 `wheel` 事件，实现当鼠标悬停在具有垂直滚动的子容器上时优先触发其纵向滚动；仅当子容器已滚动至顶部或底部时，才将滚轮事件“透传”给父容器执行水平滚动，从而提供自然、符合直觉的嵌套滚动体验。
在复杂的 UI 布局中，常遇到「父容器水平滚动 + 子容器垂直滚动」的嵌套场景（例如横向时间轴中嵌入可上下滑动的详情面板）。默认情况下，wheel 事件会冒泡并作用于最近的可滚动祖先，导致无法精准控制滚动流向。要实现「子容器滚动完再交由父容器滚动」的链式行为，需手动拦截事件并判断滚动边界。
核心思路是：
✅ 监听父容器的 wheel 事件（统一入口，避免事件重复绑定）；
✅ 判断 event.target 是否为子滚动容器；
✅ 若是，则检查子容器是否已到达顶部（scrollTop === 0） 或 底部（scrollHeight - scrollTop === clientHeight）；
✅ 根据方向（deltaY > 0 表示向下滚动， 表示向上）决定是否“溢出”到父容器；<br>
✅ 手动更新 <code>scrollTop 或 scrollLeft，并调用 event.preventDefault() 阻止默认行为。
以下是完整可运行的实现代码：
<div id="parentDiv">
<div id="childDiv">
<div class="content">
<p>Content that can be scrolled vertically...</p>
<!-- 多段内容确保高度超出 childDiv -->
</div>
</div>
<div style="display: inline-block; width: 200px; height: 300px;"><p>More Content...</p></div>
<!-- 其他横向内容项 -->
</div>
#parentDiv {
width: 600px;
height: 300px;
overflow-x: auto;
white-space: nowrap;
border: 1px solid #333;
}
#childDiv {
width: 200px;
height: 300px;
overflow-y: auto;
display: inline-block;
vertical-align: top;
border: 1px solid #e74c3c;
}
.content {
height: 600px; /* 确保可垂直滚动 */
}
const parentDiv = document.getElementById('parentDiv');
const childDiv = document.getElementById('childDiv');
parentDiv.addEventListener('wheel', function(event) {
// 仅当鼠标指针位于 childDiv 内部时启用智能分发逻辑
if (event.target === childDiv || childDiv.contains(event.target)) {
const isAtTop = childDiv.scrollTop === 0;
const isAtBottom = childDiv.scrollHeight - childDiv.scrollTop 0 && isAtBottom) {
// 向下滚动且已到底 → 触发父容器向右滚动
parentDiv.scrollLeft += 20; // 使用固定步长更稳定（替代 event.deltaY）
event.preventDefault();
} else if (event.deltaY <p>⚠️ <strong>注意事项与优化建议</strong>： </p>
-
精度问题：直接使用
event.deltaY控制scrollLeft可能导致滚动不平滑（尤其在 macOS 触控板上），推荐改用固定像素步长（如±20）或结合deltaMode进行归一化处理； -
边界检测增强：
scrollHeight - scrollTop === clientHeight在存在 sub-pixel 渲染或缩放时可能失准，建议使用替代 <code>===； -
事件委托兼容性：若子内容动态生成，应确保
event.target判断支持后代元素（如childDiv.contains(event.target)）； -
无障碍与键盘支持：此方案仅处理鼠标滚轮；如需支持键盘（PageUp/PageDown/ArrowKeys）或触屏拖拽，需额外监听
keydown和touchmove事件并同步逻辑； -
性能提示：避免在
wheel中执行重排操作（如读取offsetHeight），本例中所有属性均为缓存值，性能安全。
该方案在 Chrome、Firefox、Edge 上表现稳定，在 Safari 中需注意 scrollBy() 的兼容性（可酌情降级为 scrollLeft += value）。通过合理封装，还可抽象为自定义 Hook（React）或指令（Vue），复用于多个嵌套滚动组件。
