如何通过JavaScript实现先滚动overflow div后再滚动body？

问题说明 #

给定以下HTML代码（已修正原代码中的语法错误），需求为：用户滚动时，需先让.overFlow所在的.container完成滚动（滚至顶部或底部），之后才允许body滚动，禁止使用jQuery。

修正后的HTML代码 #

<body>
    <div class="container" style="overflow-y: scroll; width: 100%; height: 500px; display: flex;">
        <div class="overFlow" style="width: 60%; height: 1000px; background-color: red;"></div>
        <div class="formContainer" style="width: 40%;">
            <form>
                <label style="width: 100%; display: block;">
                    <input placeholder="enter your name" type="text">
                </label>
                <label style="width: 100%; display: block;">
                    <input placeholder="enter your password" type="password">
                </label>
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>
</body>

原生JS实现方案 #

核心逻辑是监听.container的滚动事件，判断容器是否到达滚动边界，仅当容器无法继续滚动时，才允许body响应滚动。

const container = document.querySelector('.container');

container.addEventListener('wheel', (e) => {
    const { scrollTop, scrollHeight, clientHeight } = container;
    // 判断是否滚到底部（留1px误差兼容精度问题）
    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
    // 判断是否滚到顶部
    const isAtTop = scrollTop <= 1;

    // 向下滚动且未到底部，或向上滚动且未到顶部时，阻止body滚动
    if ((e.deltaY > 0 && !isAtBottom) || (e.deltaY < 0 && !isAtTop)) {
        e.preventDefault();
    }
}, { passive: false }); // 必须设置passive为false才能调用preventDefault

说明 #

1. 原HTML存在语法错误：style属性值需用分号分隔，.container需添加display:flex实现子元素并排，input和button标签存在拼写/闭合错误，已全部修正；
2. 通过wheel事件监听滚动行为，deltaY判断滚动方向（正为向下，负为向上）；
3. 当容器还能滚动时，调用preventDefault()阻止默认滚动（即body的滚动）；当容器到达边界时，不阻止默认行为，body即可正常滚动。

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