最直接的方案是给容器设置 overflow-y: auto 并约束高度；需注意 auto 与 scroll 的行为差异、box-sizing 处理、跨浏览器滚动条样式适配、iOS 卡顿优化及 scrollIntoView 作用域问题。
给容器加 overflow-y: auto 是最直接的方案
局部滚动本质是让某个区域独立处理滚动，不牵连整个页面。核心就是给目标容器（比如一个 <div>）设置 overflow-y: auto 或 overflow-y: scroll，再配上固定高度或最大高度。
注意两点：auto 只在内容溢出时显示滚动条，scroll 会强制显示（哪怕没溢出），后者在 Safari 上可能触发非预期的滚动行为；另外必须有明确的高度约束（height 或 max-height），否则容器会随内容撑开，滚动失效。
-
height: 300px适合高度固定的场景 -
max-height: 300px更灵活，内容少时不浪费空间 - 别忘了加
box-sizing: border-box，避免 padding 把高度撑超
滚动条样式要兼容 Chrome/Firefox/Safari 得分开写
各浏览器对 ::-webkit-scrollbar 的支持程度不同，Firefox 从 64+ 开始支持 scrollbar-width 和 scrollbar-color，Safari 目前基本不支持自定义（仅能隐藏）。所以实际项目中得做分层适配。
Chrome/Edge（WebKit/Blink 内核）用伪元素控制；Firefox 用 CSS 属性；Safari 建议保留默认或用 JS 库兜底。
立即学习“前端免费学习笔记（深入）”；
- Chrome：用
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb - Firefox：加
scrollbar-width: thin和scrollbar-color: #666 #f0f0f0 - Safari：目前无法可靠修改 thumb 大小和圆角，
overflow: overlay已废弃，别依赖
遇到滚动卡顿或 touch 不响应？检查 will-change 和 -webkit-overflow-scrolling
移动端 iOS Safari 滚动卡顿常见于未启用硬件加速，或容器内有大量重绘元素。老式写法 -webkit-overflow-scrolling: touch 虽已过时（iOS 13+ 默认启用惯性滚动），但某些混合应用 WebView 中仍有残留影响。
- 现代方案优先加
will-change: scroll-position触发合成层（慎用，别滥用） - 确保滚动容器没有
transform或opacity动画同时作用，否则可能触发频繁重排 - 如果用了
position: sticky子元素，确认父容器没设overflow: hidden，否则 sticky 会失效
用 scrollIntoView 滚动到指定元素时位置偏移？得看容器是否是 body
调用 element.scrollIntoView({ block: 'start' }) 默认滚动的是 document.scrollingElement（通常是 html 或 body），但如果目标在局部滚动容器里，必须显式调用容器的 scrollIntoView 方法，否则会滚错地方。
- 正确做法：
container.querySelector('.target').scrollIntoView({ block: 'nearest', inline: 'start' }) - 注意
block值在局部容器中仍指垂直方向，不是文档流意义上的“块级” - 若容器设置了
padding或border，scrollIntoView的定位起点是容器 content box，不是 padding box —— 这点容易导致视觉偏差
scrollIntoView 作用域混淆这三处。 
