含长内容可滚动子div的父div无缝滚动控制方案咨询

问题场景 #

嵌套的两个可滚动容器：父容器固定高度，子容器高度动态且宽度不占满父容器。当前问题是：鼠标在子容器上滚动时，若子容器已滚到顶部，无法继续向下滚动父容器，必须手动让父容器获得焦点才能继续滚动。

解决方案 #

通过监听子容器的滚轮事件，判断其是否处于滚动边界，若处于边界则将滚动行为传递给父容器，实现无缝滚动控制。

完整代码示例 #

CSS

.outer {
    width: 400px;
    background-color: antiquewhite;
    height: 400px;
    overflow-y: scroll;
}

h2 {
    margin-bottom: 500px;
}

.inner {
    height: 800px;
    width: 80%;
    overflow-y: scroll; 
    background-color: aquamarine;    
}

HTML

<div class="outer" id="outerScroll">
    <div class="inner" id="innerScroll">
        <h2>sddssd</h2>
        <h2>sddssd</h2>
        <h2>sddssd</h2>
        <h2>sddssd</h2>
    </div>
</div>

JavaScript

const inner = document.getElementById('innerScroll');
const outer = document.getElementById('outerScroll');

inner.addEventListener('wheel', (e) => {
    // 向上滚动：子容器已到顶部，传递滚动给父容器
    if (e.deltaY < 0 && inner.scrollTop === 0) {
        e.preventDefault();
        outer.scrollTop += e.deltaY;
    }
    // 向下滚动：子容器已到底部，传递滚动给父容器
    else if (e.deltaY > 0 && inner.scrollTop + inner.clientHeight >= inner.scrollHeight) {
        e.preventDefault();
        outer.scrollTop += e.deltaY;
    }
});

代码说明 #

1. 滚轮事件监听：使用wheel事件捕获滚轮的滚动方向（deltaY正负）和幅度，比scroll事件更适合处理即时的滚动传递逻辑。
2. 边界判断：
   • 子容器滚到顶部：inner.scrollTop === 0
   • 子容器滚到底部：inner.scrollTop + inner.clientHeight >= inner.scrollHeight（用>=替代===避免精度问题）
3. 滚动传递：当子容器处于边界时，先阻止子容器的默认滚动行为（e.preventDefault()），再将滚轮的幅度值（e.deltaY）加到父容器的scrollTop上，实现父容器的无缝滚动。

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