局部滚动容器需同时满足三条件：显式设置height或max-height（非auto）、overflow-y: auto或scroll、内部内容真实溢出；还需禁用html/body滚动、添加touch-action: pan-y，并用scrollintoview精准滚动到底部。
局部滚动容器必须显式设高度和overflow
内容多却不出现滚动条，90% 是因为容器没设 height 或 max-height，或者 overflow 还是默认的 visible。浏览器不会凭空“觉得该滚”，它只在明确知道空间不够时才启用滚动机制。
关键条件有三个，缺一不可：
-
height或max-height必须是具体值（如400px、70vh），不能是auto或未声明 -
overflow-y: auto（推荐）或overflow-y: scroll；overflow: hidden会直接裁剪内容 - 内部内容真实溢出——比如子元素总高度 > 容器高度，且未被
flex-shrink: 0或min-height: 0干扰计算
错误示例：<div class="log"><p>很多行</p></div>，即使里面塞了 100 行，只要没设高+没设 overflow，就绝不会出滚动条。
全局滚动条还在？得锁住 html 和 body
局部容器能滚了，但页面还是跟着动——说明 html 和 body 仍在参与滚动。它们是根滚动上下文，不主动禁用，就会和局部容器“抢滚动权”。
正确做法是统一收口：
- 给
html, body加height: 100%+overflow: hidden - 确保局部容器（如
.chat-log）的height是相对于视口计算的（例如calc(100vh - 120px)），而非依赖 body 布局流 - 避免对
body单独设overflow-y: hidden后又忘了html，Safari 下常因此失效
注意副作用：position: fixed 元素（如导航栏）若原本靠 body 滚动定位，锁住后可能脱离预期位置，需改用 position: sticky 或调整父容器。
移动端滚动卡顿或点不动？补上 touch-action
iOS Safari 和部分安卓 WebView 对 overflow: auto 容器的触控滚动支持有限，默认禁用惯性滚动。光设 overflow 不够，还得告诉浏览器“这里允许纵向拖拽”。
必须加这一行：
.scrollable-container {
touch-action: pan-y;
}
不要依赖已废弃的 -webkit-overflow-scrolling: touch（旧版 iOS 需要，但现代方案优先用 touch-action）；也不要漏掉，否则用户手指一划就跳回顶部，或完全无响应。
额外提醒：
- 容器内若有
transform、will-change或 iframe，可能打断滚动上下文，先移除验证 - 如果滚动区域是 flex 子项，检查是否被
align-items: center居中撑高，导致实际可滚动空间变小
滚动到底部/到某元素？别用 offsetTop 硬算
想让局部容器自动滚到最后一项，很多人直接写 container.scrollTop = lastItem.offsetTop，结果错位严重——因为 offsetTop 是相对最近定位祖先的，不是相对容器顶部。
更可靠的做法是用 scrollIntoView 或 scrollTo 的原生语义：
- 滚动到最后一个可见子元素：
lastItem.scrollIntoView({ behavior: 'smooth', block: 'end' }) - 手动控制容器滚动：
container.scrollTo({ top: lastItem.offsetTop - container.scrollTop, behavior: 'smooth' }) - 务必等 DOM 渲染完成再调，React 用
useEffect，Vue 用onMounted，原生用requestAnimationFrame包一层
最易忽略的一点：如果最后一项是动态插入的（比如聊天消息），而你没监听它的 DOMNodeInserted 或用 MutationObserver，那么 lastItem 可能取到旧节点，滚动就停在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
