通过移除子列表的独立滚动行为、仅保留外层容器的 overflow: auto，即可让两个垂直排列的列表共享同一个平滑滚动条，避免滚动中断和焦点切换问题。
通过移除子列表的独立滚动行为、仅保留外层容器的 `overflow: auto`，即可让两个垂直排列的列表共享同一个平滑滚动条，避免滚动中断和焦点切换问题。
在 Web 开发中，当两个
- 列表垂直堆叠于同一固定高度容器内时，若为每个列表单独设置 overflow: auto（如原始代码所示），浏览器会为每个子元素创建独立的滚动上下文。这将导致：用户滚动至第一个列表底部时，滚动立即停止；必须移动鼠标并重新触发滚轮事件，才能将滚动焦点“移交”给容器或第二个列表——体验割裂且不符合直觉。
- .list 元素 不设置 height 或 overflow（尤其禁用 overflow: auto/scroll）；
- 所有列表内容自然流式布局，总高度超出 .container 高度时，由容器统一裁剪并提供滚动条；
- 可选地添加内边距、分隔线等视觉样式提升可读性，但绝不干扰文档流。
根本解法是：消除子级滚动容器，仅由外层 .container 承担唯一滚动职责。
这意味着需确保：
✅ 正确的 CSS 示例：
.container {
width: 150px;
height: 70px;
overflow: auto; /* 唯一滚动源 */
border: 1px solid #ddd;
border-radius: 4px;
}
.list {
margin: 0;
padding: 8px 0; /* 垂直内边距增强呼吸感 */
list-style: none;
border-bottom: 1px solid #eee; /* 可视化分隔，最后一个可额外清除 */
}
.list:last-child {
border-bottom: none;
}
✅ 对应 HTML 结构（保持语义清晰）：
<div class="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<!-- ... 共12项 -->
</ul>
<ul class="list">
<li>Item A1</li>
<li>Item A2</li>
<!-- ... 共12项 -->
</ul>
</div>
? 关键注意事项：
- ❌ 不要为 .list 设置 height、max-height 或 overflow（含 hidden），否则将重新触发嵌套滚动，破坏统一滚动逻辑；
- ✅ 若需控制单个列表内部换行或文字截断，应使用 white-space、text-overflow 等属性，而非限制高度；
- ✅ 在移动端需额外测试 touch-action: pan-y 或 -webkit-overflow-scrolling: touch（旧 iOS）以保障触控滚动流畅性；
- ⚠️ 若列表数据动态加载（如虚拟滚动场景），则需结合 JavaScript 计算总高度并同步更新容器 scrollHeight，但本方案仍为 DOM 层最简可靠基础。
总结：“一个容器，一个滚动条” 是解决多区块共用滚动的核心原则。 与其试图协调多个滚动上下文的焦点传递，不如回归流式布局本质——让内容自然延伸，由父容器统一分配滚动能力。这不仅简化 CSS，更显著提升跨浏览器与跨设备的一致性体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
