双栏独立滚动需分离容器并设明确高度与overflow：为aside和main分别设height（如calc(100vh-64px)）和overflow-y:auto；flex布局中避免flex-basis:0%，推荐.sidebar{flex:0 0 280px}、.content{flex:1}并确保其有确定块级尺寸。
双栏独立滚动的 DOM 结构必须分离滚动容器
浏览器默认不会让两个区域“各自滚动”，除非它们是独立的可滚动元素。常见错误是把两栏塞进同一个 <div> 并设 overflow: auto，结果只在外层产生一个滚动条，内容一起动。
正确做法是为左右两栏分别创建带滚动能力的容器：
<div class="layout"> <aside class="sidebar"></aside> <main class="content"></main> </div>
然后对 .sidebar 和 .content 单独设置：
-
height或max-height（必须有明确高度约束，否则无法触发滚动） -
overflow-y: auto（仅垂直滚动；若需横向加overflow-x） - 避免父级
overflow: hidden拦截子滚动
CSS 中 height 的取值直接影响滚动行为
用 100vh 看似合理，但常被头部/底部占用空间后导致内容被裁剪或滚动失效。更稳妥的是基于视口减去固定 UI 区域：
立即学习“前端免费学习笔记（深入）”；
.sidebar, .content {
height: calc(100vh - 64px); /* 假设顶部导航高 64px */
overflow-y: auto;
}其他常见陷阱：
-
height: 100%在 flex 容器中可能无效——父级需有明确高度，且不能依赖未定义的祖先 - 使用
min-height代替height会导致无滚动（内容少时撑不开，内容多时也不触发） - 在 flex 布局中，记得给容器加
flex-shrink: 0防止滚动区被压缩失高
用 flex 实现响应式双栏时要防 flex-basis 干扰滚动
很多人用 display: flex 布局双栏，但忘记 flex: 1 默认等价于 flex: 1 1 0%，其中 flex-basis: 0% 会让子元素初始宽度坍缩，进而影响滚动容器的尺寸计算。
推荐显式声明：
.sidebar { flex: 0 0 280px; } /* 固定宽侧边栏 */
.content { flex: 1; } /* 主内容自适应，但需额外设 height */关键点：
- 滚动容器必须有确定的块级尺寸（
width+height），不能完全靠 flex 自撑 - 如果内容栏也要响应式缩放，用
min-width+flex: 1，再配合内部height: 100%和overflow - 移动端慎用双栏滚动——小屏上用户习惯单列，强行双栏易误触或溢出
JavaScript 干预滚动时别直接操作 scrollTop
有些场景需要同步两栏滚动位置（比如文档对比），但注意：直接读写 scrollTop 在 Safari 和部分安卓 WebView 中有延迟或不触发重绘。
更可靠的方式：
- 监听
scroll事件后，用requestAnimationFrame批量更新另一栏位置 - 避免在滚动中频繁调用
scrollTop = value，改用element.scrollTo({ top: value, behavior: 'instant' })（兼容性查scrollTo的behavior支持） - 如需平滑同步，优先用 CSS
scroll-behavior: smooth配合 JS 控制，而非手动插值
真正难的不是让两栏能滚，而是让它们在各种缩放、字体加载、动态内容插入后仍保持高度稳定——每次 DOM 变更都可能重置 scrollTop 或触发重排，这点容易被忽略。
