局部滚动的本质是让容器内内容超出时自行滚动而非整页滚动，需设固定高度或max-height并配overflow: auto，注意子元素约束、flex项min-height: 0及跨浏览器兼容性。
给容器设置固定高度和 overflow: auto
局部滚动的本质，就是让某个元素内部内容超出时自行滚动，而不是让整个页面滚。关键在于控制该区域的尺寸和溢出行为。
最直接的做法是给目标容器（比如 <div>）设一个明确的 <code>height 或 max-height，再加 overflow: auto（或 overflow-y: auto）。浏览器会自动在内容超长时显示垂直滚动条。
-
overflow: auto只在需要时显示滚动条；overflow: scroll会强制显示（哪怕没内容溢出），不推荐 - 别只写
height: 100%—— 如果父元素没设定高度，它会塌缩为 0，导致滚动失效 - 用
max-height比height更灵活，内容少时不占满空间，内容多时才触发滚动 - 如果容器内有 Flex 子项，注意某些情况下需加
min-height: 0防止子项撑开容器（Chrome/Firefox 行为差异）
避免内部元素撑破容器导致滚动失效
常见现象：明明写了 max-height: 300px; overflow-y: auto，但内容一多，容器反而把整个页面顶下去，滚动条出现在页面右侧而非容器内。
这通常是因为子元素（尤其是 <div>、<code><p></p> 或 Flex/Grid 项目）默认具有最小尺寸约束，在 flex 容器中会拒绝收缩，从而突破父容器限制。
立即学习“前端免费学习笔记（深入）”；
- 对滚动容器本身加
min-height: 0（尤其当它是 flex item 时） - 对直接子元素加
min-height: 0或overflow: hidden（视语义而定） - 避免子元素使用
height: 100%或flex: 1无条件拉伸，除非你明确希望它填满可滚动区域 - 调试时右键检查滚动容器，看 computed height 是否如预期；若为
auto或远大于设定值，大概率是子项未被约束
滚动条样式定制与跨浏览器兼容性
CSS 自定义滚动条主要靠 ::-webkit-scrollbar 系列伪元素，但它只在 Chromium 和 Safari 有效，Firefox 不支持，IE/Edge Legacy 已淘汰。
如果你只是想隐藏原生滚动条但保留滚动能力（比如用自定义按钮控制），可以这样：
.scrollable {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
}
.scrollable::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}-
scrollbar-width: none是 Firefox 的标准写法，auto或thin也可用 - WebKit 的
::-webkit-scrollbar必须配合display: none才能真正隐藏；仅设宽高/颜色不会禁用滚动 - 不要依赖纯 CSS 实现“完美一致”的滚动条外观——业务中更稳妥的方式是用
overflow: hidden+ JavaScript 手动监听wheel事件做模拟滚动 - 移动端（iOS Safari）对自定义滚动条支持极弱，且
overflow: auto在部分老版本中可能触发弹性回弹而非惯性滚动
JavaScript 控制局部滚动位置（如跳转到某元素）
纯 CSS 无法实现“点击后滚动到容器内特定子元素”，必须用 JS。核心是调用 scrollIntoView() 并确保作用域限定在目标容器内。
错误做法：document.getElementById('target').scrollIntoView() —— 这会让整个页面滚动。
- 正确方式：先获取滚动容器
const container = document.getElementById('list')，再调用container.querySelector('.item').scrollIntoView({ block: 'nearest', inline: 'start' }) - 更精确控制：用
container.scrollTop = target.offsetTop - container.offsetTop（注意要减去容器自身的 offsetTop，否则坐标错位） - 若容器用了
transform或position: relative，offsetTop可能不准，优先用getBoundingClientRect()计算相对位置 - 滚动动画建议加
{ behavior: 'smooth' }，但注意 iOS Safari 对局部容器的 smooth 支持不稳定，可降级为auto
局部滚动看着简单，实际卡点常出在父子尺寸继承、Flex/Grid 的默认行为、以及跨浏览器对 scrollbar 和 scrollIntoView 的实现差异上。动手前先用 DevTools 看清滚动容器的真实 height 和 overflow 状态，比盲目加样式更省时间。
