直接用 window.scrollTo({ behavior: 'smooth', top: document.body.scrollHeight }) 可平滑滚到底部，但常因 scrollHeight 获取不准、滚动容器非 window、DOM 未渲染完成或固定头部遮挡导致失败；应优先用 document.documentElement.scrollHeight，减去头部高度，并在渲染完成后调用。
直接用 window.scrollTo({ behavior: 'smooth', top: document.body.scrollHeight }) 就能平滑滚到底部，但多数人卡在 scrollHeight 拿不准、滚动容器不是 document、或页面还没渲染完就调用了。
为什么 window.scrollTo({ behavior: 'smooth', top: ... }) 滚不到底？
常见原因是 document.body.scrollHeight 在 DOM 渲染完成前就读取了，尤其在动态内容（如 React/Vue 列表加载后）或 CSS 未生效时，值偏小甚至为 0。另外，如果页面用了 html { height: 100% } 或重置样式清除了默认 margin/padding，body 可能不承载实际高度，此时应改用 document.documentElement.scrollHeight。
-
document.body.scrollHeight和document.documentElement.scrollHeight不总是一致；现代布局下后者更可靠 - 若页面有固定头部（
position: fixed），直接滚到底部可能被遮挡，需减去头部高度：top: document.documentElement.scrollHeight - headerHeight - 在
DOMContentLoaded或框架的mounted/useEffect钩子中调用，避免过早执行
滚动容器不是整个页面时怎么处理？
比如侧边栏、弹窗、卡片列表这些局部可滚动区域，window.scrollTo 完全无效。必须对目标容器元素调用 scrollTo，且要手动算它内部的目标位置——不是 offsetTop，而是相对于容器顶部的偏移。
- 先获取容器：
const container = document.querySelector('.chat-log') - 再获取最末子元素：
const lastMsg = container.lastElementChild - 计算相对偏移：
const offset = lastMsg.offsetTop - container.offsetTop（仅适用于无 padding/border/transform 干扰的简单结构） - 更健壮写法：
container.scrollTo({ top: lastMsg.offsetTop - container.scrollTop, behavior: 'smooth' })，或用getBoundingClientRect()做差值
如何防止重复滚动或滚动错位？
用户快速点击“到底部”按钮、或无限加载中反复触发，容易造成多次 scrollTo 调用冲突，动画卡顿甚至停在中间。关键不是加节流，而是用状态控制 + 滚动结束监听。
立即学习“前端免费学习笔记（深入）”；
- 设一个
isScrolling开关，在调用前检查，finally中重置 -
scrollend事件目前仅 Chrome/Firefox 支持，Safari 仍需 fallback：用setTimeout(() => {}, 300)或监听scroll事件配合requestIdleCallback - iOS Safari 对局部容器的
behavior: 'smooth'支持不稳定，实测常退化为瞬跳；可降级为behavior: 'auto'+scrollTop = scrollHeight强制到底
真正容易被忽略的是：滚动到底部 ≠ 内容已全部可见。如果最后一条消息是图片或异步加载的富文本，lastElementChild.offsetTop 可能在尺寸计算完成前就取了，结果滚到一半。务必等 img.onload 或使用 IntersectionObserver 确认元素已渲染完毕再触发滚动。
