关键是要为容器设置固定高度和overflow属性，使其成为独立可滚动上下文；再通过scrollTop、scrollIntoView或scrollTo控制其内部滚动位置，并可选加scroll-behavior: smooth实现平滑效果。
要让 HTML 页面中某个特定区域（比如一个 <div>）独立滚动，而页面其余部分保持静止，关键不是“让整个页面滚”，而是“让这个容器自己滚”——前提是它得被浏览器识别为可滚动的独立上下文。
给容器设固定尺寸 + overflow 才会触发局部滚动
浏览器不会凭空让一个元素滚动。必须同时满足两个硬性条件：
- 容器有明确的
height或max-height（不能是auto或依赖内容撑开） - CSS 中设置了
overflow: auto、overflow-y: scroll或类似值
常见错误是只写 overflow-y: scroll 却忘了设高度，结果滚动条永远不出现；或者用了 flex: 1 但父容器没给高度约束，导致子容器高度计算为 0。
正确示例：
立即学习“前端免费学习笔记（深入）”；
<div class="chat-history" style="height: 400px; overflow-y: auto;"> <p>消息1</p> <p>消息2</p> </div>
scrollTop 是控制局部滚动位置的唯一可靠方式
对页面整体用 window.scrollTo()，对局部容器就得操作它的 scrollTop 属性。这是标准 DOM 接口，所有现代浏览器都支持，且行为稳定。
- 读取当前滚动位置：
container.scrollTop - 滚动到底部：
container.scrollTop = container.scrollHeight - 滚动到顶部：
container.scrollTop = 0 - 平滑滚动到底部（需手动实现）：不能直接设
behavior: 'smooth'，得用scrollTo()配合{ behavior: 'smooth' }，但注意——scrollTo()默认作用于window，要让它作用于容器，得调用container.scrollTo()（IE 不支持，Chrome 61+ / Firefox 68+ / Safari 15.4+ 支持）
兼容性兜底写法（推荐）：
const container = document.querySelector('.chat-history');
container.scrollTop = container.scrollHeight;
// 如需平滑，加 requestAnimationFrame 或 CSS transition（见下一条）CSS scroll-behavior 对局部容器也生效，但有前提
scroll-behavior: smooth 不仅能加在 html 上影响全页，也能加在任意可滚动容器上——但前提是该容器已满足“固定尺寸 + overflow”条件，否则声明无效。
- 启用后，所有对该容器的
scrollTo()、scrollIntoView()操作都会自动带动画 - 不支持 IE；Safari 15.4 前版本会忽略该声明，降级为瞬时滚动
- 若用户开启了系统级“减少运动”偏好（
prefers-reduced-motion: reduce），该属性会被浏览器静默禁用
安全写法：
.chat-history {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}用 scrollIntoView() 定位容器内元素时容易偏移
当目标元素在可滚动容器内部，直接对它调用 element.scrollIntoView()，默认会滚动整个页面，而不是父容器。必须显式指定滚动祖先：
- 先确保容器是可滚动的（同上）
- 调用
element.scrollIntoView({ block: 'nearest', behavior: 'smooth' })，但该方法仍可能向上冒泡到window - 更稳的方式：手动计算相对偏移，再设
container.scrollTop，或使用container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: 'smooth' })（注意：offsetTop受定位父级影响，建议改用getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop）
真正容易被忽略的一点：局部滚动容器的 scrollHeight 包含所有子内容高度，但它的 clientHeight 是可视区高度——两者差值才是最大可滚动距离。很多动态加载场景里，内容追加后忘了重新触发 scrollTop 更新，就会卡在半途。
