通过移除子列表的独立滚动行为，仅保留外层容器的 overflow: auto，即可让两个列表内容自然流式堆叠，由容器统一提供单个垂直滚动条，彻底避免滚动焦点在列表间跳转中断的问题。
通过移除子列表的独立滚动行为，仅保留外层容器的 `overflow: auto`，即可让两个列表内容自然流式堆叠，由容器统一提供单个垂直滚动条，彻底避免滚动焦点在列表间跳转中断的问题。
在 Web 开发中，当多个可滚动区块（如两个
- 列表）嵌套于同一容器内时，若各自设置了 overflow: auto 或 scroll，浏览器会为每个子元素创建独立的滚动上下文。这会导致用户滚动时焦点频繁在子列表间切换——例如滚完第一个列表后需移动鼠标再滚动，体验割裂且不符合直觉。
- ✅ 容器设置 overflow: auto（或 overflow-y: auto）；
- ❌ 子列表 必须移除 height 和 overflow 相关声明（尤其是 overflow: auto/scroll），否则它们会形成独立滚动视口；
- ✅ 子列表应以普通块级元素方式自然排列，内容高度累加，使容器能感知整体高度并启用滚动。
根本解法：消除子级滚动，交由容器统一接管
关键在于只保留容器的滚动能力，同时确保子列表不截断内容流。这意味着：
以下是优化后的完整实现：
.container {
width: 150px;
height: 70px;
overflow-y: auto; /* 推荐显式指定方向，避免横向溢出干扰 */
border: 1px solid #ccc;
padding: 4px;
}
.list {
margin: 0;
padding: 5px 0; /* 垂直内边距控制列表间距 */
list-style: none;
/* 移除所有 height / overflow / max-height 等限制性样式 */
}
.list li {
padding: 2px 6px;
font-size: 14px;
}
<div class="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<!-- ... 共12项 -->
<li>Item 12</li>
</ul>
<ul class="list">
<li>Item A1</li>
<li>Item A2</li>
<!-- ... 共12项 -->
<li>Item A12</li>
</ul>
</div>
✅ 效果验证：此时整个 .container 将根据两个
- 的总高度（远超 70px）自动显示单个纵向滚动条；用户可连续、平滑地从第一个列表末尾滚动至第二个列表开头，无焦点丢失或中断。
- 若需视觉分隔两个列表，推荐使用 margin-bottom、border-bottom 或 padding-bottom，切勿用 height + overflow 创建新滚动上下文；
- 在 Flex/Grid 布局中，确保父容器未设置 align-items: flex-start 等导致子项收缩的属性，以免意外截断内容；
- 如需支持键盘导航（如 Page Down），该方案天然兼容，因 DOM 流是连续的；
- 若列表数据动态加载，需确保容器高度重绘逻辑正确（现代框架如 React/Vue 通常自动处理）。
⚠️ 注意事项：
总结：滚动行为属于容器级交互，而非内容级特性。将滚动权“上收”至共同父容器，并保持子内容流式布局，是实现无缝多区块滚动最简洁、标准且高性能的方案。
