局部滚动的本质是让容器自行管理滚动而不影响body/html，需设置overflow-y:auto并配合height/max-height等尺寸约束，scroll-behavior:smooth可实现容器内平滑滚动，但需拦截锚点默认行为并手动滚动容器。
给容器加 overflow: auto 或 scroll
局部滚动的本质，就是让某个元素自己管自己的滚动，不牵连 body 或 html。最直接的做法是给目标容器（比如 <div class="content">）设置 <code>overflow-y: auto，并限定高度或最大高度。
注意：仅设 overflow: auto 不够——如果内容没超出容器高度，滚动条不会出现；必须配合显式尺寸约束（height、max-height 或 flex 布局中的伸缩行为）。
-
overflow: hidden会隐藏溢出内容且不显示滚动条，不能滚动 -
overflow: scroll强制显示滚动条（即使内容未溢出），多数场景不推荐 -
overflow: auto是最稳妥的选择：有需要才显示滚动条
用 scroll-behavior: smooth 控制局部平滑滚动
如果希望点击锚点或调用 JS 滚动时在该容器内平滑过渡，不要给 html 或 body 设 scroll-behavior，而是只作用于局部容器本身。
例如：
立即学习“前端免费学习笔记（深入）”；
.chat-history {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}这样调用 chatHistoryElement.scrollTo() 或 targetElement.scrollIntoView() 时，滚动动画只发生在该容器内，且是平滑的。
⚠️ 兼容性提醒：scroll-behavior 在 Safari 15.4+ 才完全支持平滑滚动，旧版需降级为 JS 动画或使用 smooth-scroll 类库。
阻止锚点链接触发全局滚动
当页面中存在 href="#section-a" 这类链接，而目标元素在局部容器内时，浏览器默认会尝试把目标滚进视口——这会误触 body 滚动。必须拦截默认行为，手动计算并滚动容器。
关键步骤：
- 监听所有
a[href^="#"]的点击事件 - 用
event.preventDefault()阻止默认跳转 - 通过
document.querySelector(event.target.hash)找到目标元素 - 检查该元素是否在指定容器内（如
container.contains(target)） - 若在，则调用
container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: "smooth" })
别直接用 target.scrollIntoView() ——它默认作用于最近的可滚动祖先，可能仍是 body，而非你想要的局部容器。
Flex 布局中固定头尾、中间局部滚动的典型结构
常见需求：页眉/页脚固定，中间区域可滚动且不带动整体页面滚动。此时不能依赖 body 滚动，必须让中间容器接管。
核心 CSS：
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
flex-shrink: 0;
}
main {
flex: 1;
overflow-y: auto;
}这里 main 就是局部滚动容器。它的高度由 Flex 自动分配，不需要写死 px 值，适配性更好。但要注意：如果 main 内部子元素用了 position: absolute 或 transform，可能破坏滚动边界判断，导致 scrollHeight 计算异常。
真正容易被忽略的是：局部滚动容器一旦启用，它的 scrollTop 就成了唯一可信的滚动偏移来源——window.scrollY 对它完全无效，调试时别看错对象。
