本文介绍如何通过监听 wheel 事件，实现在鼠标悬停于可垂直滚动子元素时优先触发其纵向滚动，并在其滚动到底部或顶部后自动将滚动行为“透传”给父容器进行水平滚动，从而提升嵌套滚动区域的用户体验。
本文介绍如何通过监听 wheel 事件，实现在鼠标悬停于可垂直滚动子元素时优先触发其纵向滚动，并在其滚动到底部或顶部后自动将滚动行为“透传”给父容器进行水平滚动，从而提升嵌套滚动区域的用户体验。
在现代 Web 应用中，常遇到「父容器水平滚动 + 子容器垂直滚动」的嵌套布局场景（例如横向时间轴中嵌入纵向列表）。默认情况下，鼠标滚轮会统一作用于当前焦点元素，无法智能判断是否应优先滚动子内容——这会导致用户在子区域滚动到底部后仍需移开鼠标才能水平浏览，体验割裂。
解决该问题的核心思路是：拦截 wheel 事件，根据事件目标（event.target）和子元素当前滚动状态，动态决定滚动对象与方向。以下为完整实现方案：
✅ 基础 HTML 结构
确保父容器启用水平滚动（overflow-x: scroll），子容器启用垂直滚动（overflow-y: scroll），并使用 inline-block 或 flex 布局保持内联排列：
<div id="parentDiv">
<div id="childDiv">
<div class="content">
<!-- 长内容，确保可垂直滚动 -->
<p>Item 1</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/2017" title="讯飞智文"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679984857784.png" alt="讯飞智文" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/2017" title="讯飞智文" class="overflowclass">讯飞智文</a>
<p class="overflowclass">一款面向学习和办公场景的AI文档创作工具，可辅助生成PPT与Word文档，提高资料整理和内容制作效率。</p>
</div>
<a rel="nofollow" href="/ai/2017" title="讯飞智文" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>Item 2</p>...<!-- 多个 p 标签 -->
</div>
</div>
<!-- 其他横向并列区块 -->
<div style="display:inline-block;width:200px;height:300px;">...</div>
</div>
✅ 关键 CSS 样式
#parentDiv {
width: 600px;
height: 300px;
overflow-x: auto; /* 启用水平滚动条 */
white-space: nowrap; /* 防止换行，保障横向布局 */
border: 1px solid #000;
}
#childDiv {
width: 200px;
height: 300px;
overflow-y: auto; /* 启用垂直滚动条 */
display: inline-block;
vertical-align: top;
border: 1px solid #f00;
}
.content {
height: 600px; /* 高于 childDiv.height，确保可滚动 */
}
✅ 智能滚动事件处理逻辑
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 += event.deltaY;
} else if (event.deltaY <blockquote>
<p>? <strong>关键判断说明</strong>： </p>
<ul>
<li>childDiv.contains(event.target) 确保兼容子元素（如 .content 内的 <p>）触发事件； </p>
</li>
<li>scrollHeight - scrollTop </li>
<li>event.preventDefault() 必须调用，否则浏览器可能同时触发默认滚动，造成冲突。</li>
</ul>
</blockquote><h3>⚠️ 注意事项与优化建议</h3>
- Mac 触控板/魔法鼠标兼容性：部分设备 deltaY 符号或数值范围不同，建议结合 event.deltaMode（DOM_DELTA_PIXEL / DOM_DELTA_LINE）做归一化处理；
- 性能优化：高频 wheel 事件建议节流（如 lodash.throttle），尤其在复杂 DOM 中；
- 无障碍支持：键盘导航（PageUp/PageDown/ArrowKeys）不受此逻辑影响，需额外监听 keydown 并同步处理；
- 移动端适配：触屏 touchmove 事件逻辑不同，如需支持需单独实现。
该方案无需第三方库，纯原生 JavaScript 实现，兼顾语义清晰性与跨浏览器稳定性，是嵌套滚动交互的理想实践。
