局部滚动容器必须有固定高度（如height:300px）和overflow-y:auto才能生效；仅设max-height或依赖内容撑高会导致滚动条不出现、scrolltop恒为0。
局部滚动容器必须有固定高度和 overflow
没有固定高度的 div 即使写了 overflow-y: auto 也不会出现滚动条，scrollTop 读出来永远是 0。常见错误是只设了 max-height 或依赖内容撑开高度。
正确做法：用 height（非 min-height）+ overflow-y: auto 或 scroll：
.news-feed {
height: 300px;
overflow-y: auto;
}
- 如果内容少于 300px，不显示滚动条；超过则自动可滚
- 避免用
overflow: hidden包裹，否则scrollTop不可写 - 父级不能有
transform、will-change或filter，否则可能创建新的滚动上下文，导致滚动失效
自动滚动到底部（如聊天窗口）用 scrollTop = scrollHeight
让容器自动滚动到最新内容底部，本质是把 scrollTop 设为 scrollHeight - clientHeight。但要注意时机——DOM 渲染完成后再执行，否则值不准。
推荐写法（兼容性好，不依赖 MutationObserver）：
const container = document.getElementById('chat-box');
container.scrollTop = container.scrollHeight - container.clientHeight;
- 必须在新消息节点插入 DOM 后立即执行，比如
appendChild()或insertAdjacentHTML()之后 - 不要用
setTimeout(..., 0)模拟微任务，改用queueMicrotask()更可靠 - 如果容器内有图片，且图片加载后撑高了内容，需监听
img.onload后再调一次
自动轮播式循环滚动（如公告栏）用 setInterval + scrollBy
靠 CSS animation 实现滚动动画很难控制停顿和交互，真正可控的是 JS 驱动的 scrollBy()。
关键点在于：每次滚动前判断是否到底，到底就重置 scrollTop，避免卡住：
const ticker = document.getElementById('ticker');
let timer = setInterval(() => {
if (ticker.scrollTop >= ticker.scrollHeight - ticker.clientHeight) {
ticker.scrollTop = 0;
}
ticker.scrollBy({ top: 1, behavior: 'smooth' });
}, 50);
-
behavior: 'smooth'在 Safari 中可能被忽略，建议加降级：ticker.scrollBy({ top: 1 }) - 用户鼠标悬停时应暂停：
ticker.addEventListener('mouseenter', () => clearInterval(timer)) - 别用
scrollTo()做轮播——它要算绝对位置，容易因动态内容高度变化而错位
scroll-behavior: smooth 对局部容器也生效，但有前提
很多人以为 scroll-behavior: smooth 只对整个页面有用，其实只要加在可滚动容器上，它的 scrollIntoView() 和 scrollTop 赋值都会带平滑动画。
但必须满足三个条件：
- 该元素本身设置了
overflow-y: auto或scroll - CSS 中明确写了
scroll-behavior: smooth（不是写在body或通配符上） - 目标元素在容器内可见，且没被
display: none或visibility: hidden遮挡
例如：.log-panel { height: 200px; overflow-y: auto; scroll-behavior: smooth; }，之后调用 logItem.scrollIntoView({ behavior: 'smooth' }) 就会平滑滚动进视口。
最容易被忽略的是：当容器内部用 transform 移动子元素（比如横向轮播）时，scrollIntoView() 会失效——因为目标已不在原始文档流位置，此时只能手动计算并赋值 scrollTop。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
