局部滚动与页面滚动可共存，但需隔离容器边界：设固定尺寸、overflow-y: auto、避免transform/flex干扰、ios加-webkit-overflow-scrolling: touch、慎用scrollintoview()。
局部滚动和页面滚动能共存，但必须明确隔离容器边界——否则滚动事件会冒泡、scrollTop 计算失准、iOS 上还容易触发“回弹卡顿”。
给局部容器设固定尺寸并启用 overflow-y
这是最基础也最容易出错的一步。局部滚动失效，90% 是因为容器没设 height 或 max-height，导致 overflow-y: auto 不触发。
- 必须显式设置高度（如
height: 400px或max-height: 70vh），百分比值在 flex/absolute 环境中可能计算为 0 - 用
overflow-y: auto而非scroll，避免在内容未溢出时也显示空滚动条 - 务必加
overflow-x: hidden，防止意外出现横向滚动条干扰布局 - 若容器是 flex 子项，需确认父级没设
align-items: stretch且自身没被拉伸变形
避免 scrollIntoView() 或 scrollTo() 影响全局滚动
调用 element.scrollIntoView() 默认作用于整个文档视口，哪怕 element 在局部容器内，也会把页面顶部拽过去。
- 局部滚动内定位，应操作容器的
scrollTop：比如container.scrollTop = target.offsetTop - container.offsetTop - 若用
scrollIntoView({ block: 'start', inline: 'nearest' })，需先确保目标元素在该容器内，再传入{ behavior: 'smooth', block: 'nearest' }，但它仍可能触发外层滚动——更稳妥的是手动计算偏移 - 不要对局部容器本身调用
scrollIntoView()，它会让整个页面跳到该容器位置
iOS Safari 中局部滚动卡顿或失效
这是最隐蔽的问题：iOS WebKit 对嵌套滚动支持弱，overflow-y: auto 容器在 position: fixed/absolute 或 flex 布局下常失去惯性滚动。
- 必须加
-webkit-overflow-scrolling: touch（仅 Safari 有效，现代 iOS 已默认启用，但旧版仍需） - 避免在局部容器上同时设
transform或will-change，它们会创建新层叠上下文，中断滚动捕获 - 如果容器在
position: sticky区域里，滚动行为不可预测；换成position: relative+ 手动监听scroll判断临界点更稳 - 测试时用真机，模拟器无法复现部分 touch 滚动异常
滚动条视觉分离：右侧全局滚动条 ≠ 局部容器滚动条
CSS 无法把滚动条“抽出来”挂到页面右侧，所谓“分离”只是视觉模拟——靠布局让局部容器的原生滚动条刚好贴右边缘。
- 用
display: flex把内容区和一个透明占位块并排，例如：.wrapper { display: flex; } .content { flex: 1; overflow-y: auto; } .spacer { width: 16px; } - 滚动条宽度由
::-webkit-scrollbar控制，但它的位置永远绑定在宿主元素右边界，改不了 - 不要试图用
margin-right: -16px把滚动条“推”出去——这会导致点击失效或拖动偏移 - 若需完全自定义滚动条交互（如拖动进度条跳转），得放弃原生滚动，改用
scrollTop+requestAnimationFrame手写滚动逻辑
真正难的不是让局部滚起来，而是让它滚得干净：不带歪页面、不卡在 iOS、不被 transform 隐藏、不被父级 flex 吞掉高度——这些边界条件比代码多三倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
