实现双列表共用单滚动条的 CSS 解决方案

通过移除子列表的独立滚动行为、仅保留外层容器的 overflow: auto，即可让两个垂直排列的列表共享同一个平滑滚动条，避免滚动中断和焦点切换问题。 通过移除子列表的独立滚动行为、仅保留外层容器的 `overflow: auto`，即可让两个垂直排列的列表共享同一个平滑滚动条，避免滚动中断和焦点切换问题。在 Web 开发中，当两个 <ul> 列表垂直堆叠于同一固定高度容器内时，若为每个列表单独设置 overflow: auto（如原始代码所示），浏览器会为每个子元素创建独立的滚动上下文。这将导致：用户滚动至第一个列表底部时，滚动立即停止；必须移动鼠标并重新触发滚轮事件，才能将滚动焦点“移交”给容器或第二个列表——体验割裂且不符合直觉。根本解法是：消除子级滚动容器，仅由外层 .container 承担唯一滚动职责。这意味着需确保：.list 元素 不设置 height 或 overflow（尤其禁用 overflow: auto/scroll）；所有列表内容自然流式布局，总高度超出 .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>? 关键注意事项： MacsMind 电商AI超级智能客服