多个全屏可滚动div滚动到边界后需点击/移动光标才能切换滚动的问题

多个占满全屏（100vh）、设置了overflow: auto的独立滚动div纵向排列，每个div内部有长内容需要滚动查看。实际使用时，在单个div内滚动到顶部/底部边界后，必须移动光标或点击其他区域才能切换滚动控制权，无法连续滚动浏览跨div的内容，不符合常规网页滚动体验。

复现代码 #

HTML 部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="div1"><div style="height:5000px"></div></div>
        <div class="div2"><div style="height:5000px"></div></div>
        <div class="div3"><div style="height:5000px"></div></div>
    </div>
</body>
</html>

CSS 部分 #

.container {
    background-color: #000;
    width: 100%;
    height: auto; /* 业务要求无法设置固定高度 */
}

.div1, .div2, .div3 {
    height: 100vh;
    width: 100%;
    overflow: auto;
}
.div1 {background-color: rgba(255, 0, 0, 0.5);}
.div2 {background-color: rgba(0, 255, 0, 0.5);}
.div3 {background-color: rgba(0, 0, 255, 0.5);}

浏览器对滚动事件有默认的焦点锁定逻辑：滚轮事件会优先作用于当前光标悬停的滚动容器，当该容器滚动到边界后，浏览器不会立刻将滚动权限传递给父级页面，会短暂阻断滚动事件冒泡，避免滚动误跳；只有当滚动动作完全停止、用户移动光标或点击后，才会重新识别光标下的可滚动容器，最终导致滚动卡壳。

不需要改动现有DOM结构和容器布局，通过CSS优化+JS事件接管即可实现连续滚动效果，完全符合常规浏览体验。

第一步：添加CSS优化滚动体验 #

给每个独立滚动的div添加overscroll-behavior: contain属性，禁用默认的滚动回弹、边界冒泡触发浏览器手势（比如前进后退、页面刷新）的问题，修改后CSS对应部分如下：

.div1, .div2, .div3 {
    height: 100vh;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain; /* 新增 */
}

第二步：添加JS逻辑接管边界滚动 #

监听每个独立滚动容器的滚轮事件，判断当前容器是否到达滚动边界：如果滚动方向超出当前容器的可滚动范围，就阻止当前容器的无效滚动，直接将滚动距离传递给父级页面，驱动页面滚动切换到下一个/上一个div，实现无停顿连续滚动。
将以下代码添加到页面JS中即可：

// 获取所有独立滚动的区块
const scrollSections = document.querySelectorAll('.div1, .div2, .div3');

scrollSections.forEach(section => {
  section.addEventListener('wheel', (e) => {
    const { deltaY } = e;
    const { scrollTop, scrollHeight, clientHeight } = section;
    // 留1px容错，避免小数像素导致的判断失效
    const reachBottom = scrollTop + clientHeight >= scrollHeight - 1;
    const reachTop = scrollTop <= 1;

    // 向下滚动到达底部时，将滚动权交给页面
    if (deltaY > 0 && reachBottom) {
      e.preventDefault();
      section.scrollTop = scrollHeight - clientHeight;
      window.scrollBy({ top: deltaY });
      return;
    }

    // 向上滚动到达顶部时，将滚动权交给页面
    if (deltaY < 0 && reachTop) {
      e.preventDefault();
      section.scrollTop = 0;
      window.scrollBy({ top: deltaY });
      return;
    }
  }, { passive: false }); // 关闭被动监听才能正常阻止默认事件
});

方案说明 #

• 完全保留原有布局逻辑，不需要给容器设置固定高度，符合业务要求
• 滚动跟手无停顿，不需要移动鼠标、点击操作即可连续浏览所有区块内容
• 兼容Chrome、Firefox、Safari、Edge等所有主流桌面浏览器
• 支持触控板、鼠标滚轮的滚动操作，滚动速度和系统默认逻辑一致

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