局部滚动容器必须设置 height 或 max-height 才能启用滚动上下文，否则 scrolltop 始终为 0；scrollintoview 遮挡需用 scroll-margin-top 补偿；需手动存取 scrolltop 防刷新丢失；scroll-behavior: smooth 必须直接作用于容器本身。
局部滚动容器没高度，scrollTop 始终为 0
这是最常见也最容易被忽略的原因：一个 div 即使写了 overflow-y: auto，只要没有明确的**固定高度约束**（height 或 max-height），浏览器就不会启用滚动上下文，scrollTop 永远是 0，scrollBy() 和 scrollIntoView() 全部失效。
必须确保：
- 容器设置了
height或max-height（不能只靠min-height或内容撑开） -
overflow-y是auto或scroll（auto更稳妥，避免 Safari 下偶发不触发滚动事件） - 父级没有
overflow: hidden截断，也没有transform/perspective创建新层叠上下文导致子元素定位失准
scrollIntoView 后目标元素被遮挡或滚偏
调用 el.scrollIntoView({ behavior: 'smooth' }) 后，目标进了视口，但顶部被固定 header 盖住、底部卡在容器底边外——这不是 JS 错误，而是 CSS 缺少滚动终点偏移定义。
正确解法是用 CSS 的 scroll-margin-top（或 scroll-margin-bottom）：
- 给目标元素加
scroll-margin-top: 60px（数值等于容器上方固定区域高度） - 该值从容器 content box 开始计算，无需额外补偿 padding/border
- 响应式场景下，可用
@media或 CSS 自定义属性动态调整，比 JS 监听resize更可靠
滚动后位置丢失，刷新/重渲染就回到顶部
局部滚动容器（如聊天记录区、侧边菜单）在 DOM 重渲染、组件切换或页面刷新后，scrollTop 会重置为 0。浏览器只默认记住 document.documentElement.scrollTop，不会保存子容器偏移。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
必须手动存取：
- 滚动结束时读取并存到
localStorage或组件state，键名建议带容器 ID，例如chat-history-scroll-top - 容器挂载完成（如 React 的
useEffect、Vue 的onMounted）后立即赋值：container.scrollTop = savedValue - 若容器高度动态变化（如消息加载中），先设
scrollTop，再用requestAnimationFrame延迟一帧再检查是否生效，避免被布局重排覆盖
scroll-behavior: smooth 在局部容器里不生效
scroll-behavior: smooth 不继承，也不穿透父级作用域。给 html 或 body 设置，对 .sidebar-menu 这类局部容器完全无效。
必须显式加在滚动容器本身上：
- 确认该容器确实可滚动：内容高度 > 容器高度，且无
overflow: hidden父级 - CSS 写法必须是：
.chat-history { scroll-behavior: smooth; } - 若容器由框架动态创建（如
v-if切换），样式需在元素存在时已挂载；否则首次scrollIntoView()会硬跳 - 用户开启系统级「减少动画」偏好（
prefers-reduced-motion: reduce）时，该属性自动失效，这是正常行为，不应强行绕过
真正起效的前提，永远是容器先具备可滚动上下文——高度 + overflow 缺一不可。很多“不生效”问题，其实根本还没走到 JS 或 CSS 行为控制那步，只是容器压根没被浏览器识别为滚动区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
