本文介绍如何通过监听 wheel 事件，使鼠标悬停在可垂直滚动的子元素上时优先触发其垂直滚动；当子元素已滚动至顶部或底部时，自动将滚动行为“透传”给父容器，实现水平滚动，从而提升多方向嵌套滚动场景下的用户体验。
本文介绍如何通过监听 `wheel` 事件，使鼠标悬停在可垂直滚动的子元素上时优先触发其垂直滚动；当子元素已滚动至顶部或底部时，自动将滚动行为“透传”给父容器，实现水平滚动，从而提升多方向嵌套滚动场景下的用户体验。
在 Web 开发中，常遇到「父容器支持水平滚动、内部子元素支持垂直滚动」的复合布局需求（例如横向信息流中嵌入可上下滑动的详情卡片）。默认情况下，浏览器仅响应最内层可滚动元素的 wheel 事件，无法自动在滚动到底边界后“溢出”到父级。要实现自然的滚动链式传递（即：子元素滚动完再滚父容器），需手动干预事件流向。
核心思路是：捕获 wheel 事件，判断当前滚动目标是否为子元素，并检测其是否已达滚动极限（顶部/底部），再决定滚动目标和方向。
以下为完整实现方案：
✅ HTML 结构（关键语义清晰）
<div id="parentDiv">
<!-- 可垂直滚动的子容器 -->
<div id="childDiv">
<div class="content">
<p>Content that can be scrolled vertically...</p>
<!-- 更多内容确保高度超出容器，启用垂直滚动 -->
</div>
</div>
<!-- 同级其他横向排列内容 -->
<div style="display: inline-block; width: 200px; height: 300px;"><p>More Content...</p></div>
<div style="display: inline-block; width: 200px; height: 300px;"><p>Even More Content...</p></div>
<!-- ...更多横向区块 -->
</div>✅ CSS 样式（明确滚动行为）
#parentDiv {
width: 600px;
height: 300px;
overflow-x: auto; /* 启用水平滚动 */
white-space: nowrap; /* 防止子元素换行 */
border: 1px solid #000;
scroll-behavior: smooth; /* 可选：平滑滚动 */
}
#childDiv {
width: 200px;
height: 300px;
overflow-y: auto; /* 启用垂直滚动 */
display: inline-block;
vertical-align: top;
border: 1px solid #f00;
}
.content {
height: 600px; /* 确保内容高度 > 容器高度，触发垂直滚动 */
}✅ JavaScript 逻辑（精准控制滚动流向）
const parentDiv = document.getElementById('parentDiv');
const childDiv = document.getElementById('childDiv');
parentDiv.addEventListener('wheel', function(event) {
// 仅当 wheel 事件发生在 childDiv 或其子元素上时，才考虑垂直滚动
const isChildTarget = event.target === childDiv || childDiv.contains(event.target);
if (isChildTarget) {
// 检测子元素是否已滚动到底部（向下滚动且无剩余空间）或顶部（向上滚动且 scrollTop 为 0）
const atBottom = childDiv.scrollHeight - childDiv.scrollTop <= childDiv.clientHeight + 1;
const atTop = childDiv.scrollTop === 0;
if ((event.deltaY > 0 && atBottom) || (event.deltaY < 0 && atTop)) {
// 子元素已达极限 → 触发父容器水平滚动
parentDiv.scrollLeft += event.deltaY;
} else {
// 子元素仍有滚动空间 → 执行垂直滚动
childDiv.scrollTop += event.deltaY;
}
} else {
// 事件发生在父容器其他区域 → 直接水平滚动
parentDiv.scrollLeft += event.deltaY;
}
event.preventDefault(); // 阻止默认行为（避免页面整体滚动等干扰）
});⚠️ 注意事项与优化建议
- 精度容差处理：使用 <= childDiv.clientHeight + 1 替代严格相等，规避因像素四舍五入导致的边界判断失效；
- 事件委托更健壮：若 childDiv 内部存在动态插入的子元素，推荐用 childDiv.contains(event.target) 判断目标是否在子容器内，而非仅依赖 event.target === childDiv；
- 移动端兼容性：该方案主要针对鼠标滚轮（wheel），如需支持触摸板/触屏拖拽，需额外监听 touchmove 并结合 scrollTop/scrollLeft 手动模拟，或使用 IntersectionObserver + scroll() API 做增强；
- 性能考量：高频 wheel 事件建议添加节流（如 lodash.throttle），但本例中因仅做简单数值累加，通常无需额外优化；
- 无障碍友好：确保 childDiv 和 parentDiv 均设置 tabindex="0"，支持键盘 Tab 导航与空格/方向键滚动。
此方案在 Chrome、Firefox、Edge 中表现稳定，在 Safari（尤其是 macOS 上的触控板）可能存在细微延迟，可通过 event.deltaMode === 1（DOM_DELTA_LINE）进一步标准化滚动步长。最终效果：用户在子区域滚动时流畅上下，触达边界后无缝转向左右滑动，显著提升复杂布局下的交互直觉性。
