如何调整滚动优先级：让outer div先于inner div滚动？

问题场景 #

当前嵌套结构中，触摸滚动.content时，.inner会优先滚动，之后才轮到.outer。需求是让.outer先完成滚动，再触发.inner的滚动行为。

实现方案 #

通过JavaScript监听滚动事件，控制滚动事件的传递顺序：先让.outer滚动到边界后，再允许.inner响应滚动。

完整代码示例 #

CSS（微调全局溢出设置，避免不必要滚动条）

* {
    position: relative;
}
.outer {
    height: 20vh;
    background-color: green;
    width: 300px;
    overflow: auto;
}

.inner {
    height: 50vh;
    background-color: red;
    width: 250px;
    overflow: auto;
}

.content {
    height: 70vh;
    background-color: blue;
    width: 200px;
}

HTML（保持原有嵌套结构）

<div class="outer">shall 1st, scrolls 2nd
    <div class="inner">shall 2nd, scrolls 1st
        <div class="content">scroll in here
        </div>
    </div>
</div>

JavaScript 核心逻辑

const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');

// 监听鼠标滚轮和触摸滚动事件
inner.addEventListener('wheel', handleScroll, { passive: false });
inner.addEventListener('touchmove', handleScroll, { passive: false });

function handleScroll(e) {
    // 判断outer是否到达滚动边界
    const outerAtTop = outer.scrollTop === 0;
    const outerAtBottom = outer.scrollTop + outer.clientHeight >= outer.scrollHeight;

    // 若outer未到达边界，阻止inner滚动，手动驱动outer滚动
    if ((e.deltaY > 0 && !outerAtBottom) || (e.deltaY < 0 && !outerAtTop)) {
        e.preventDefault();
        outer.scrollTop += e.deltaY;
    }
    // outer到达边界后，不阻止事件，让inner正常滚动
}

逻辑说明 #

1. 给.inner绑定滚动相关事件，设置passive: false以允许拦截默认滚动行为。
2. 每次滚动时先检查.outer的滚动状态：
   • 如果.outer还没滚到顶部/底部，阻止.inner的默认滚动，手动控制.outer滚动对应距离。
   • 当.outer到达滚动边界后，不再拦截事件，.inner会自动响应滚动。

内容的提问来源于stack exchange，提问作者maxischl