局部滚动容器需设固定高度（如height/max-height）并配overflow-y: auto才能启用滚动；ios需-webkit-overflow-scrolling: touch、非static定位及完整viewport meta；transform/filter会破坏offsettop，应改用getboundingclientrect或scrollintoview；js滚动赋值须在requestanimationframe中确保布局完成。
局部滚动容器没设固定高度，scrollTop 始终为 0
局部滚动根本没启动，不是 JS 没写对，而是 CSS 没满足最基本前提：浏览器只对「有明确可视区域边界」的容器创建滚动上下文。没有 height 或 max-height，overflow-y: auto 就是摆设。
常见错误包括：
- 只写
min-height或靠内容撑高 → 滚动上下文不被创建 - 父级用
display: flex但子容器没加flex-shrink: 0→ 高度被压缩归零 - 用百分比高度（如
height: 100%）但父级没设高度 → 计算结果为 0
可靠写法：height: 400px、max-height: 70vh 或 height: calc(100vh - 120px)，并确保该容器的 overflow-y 是 auto 或 scroll。
移动端 touch 事件未激活，iOS Safari 完全不响应滑动
在 iPhone 或 iPad 上点得中、滑不动，90% 是因为 -webkit-overflow-scrolling: touch 缺失或失效。它虽被标记 deprecated，但截至 2026 年仍是 iOS/Android WebView 启用原生惯性滚动的唯一有效开关。
必须同时满足三个条件：
- 容器样式含
overflow-y: auto和-webkit-overflow-scrolling: touch - 容器
position不能是static（至少为relative） -
viewportmeta 标签完整：必须同时含width=device-width和initial-scale=1.0
漏掉任一条件，iOS 就会退化为“点击跳转式”滚动，或直接无响应。
滚动容器被 transform / filter 包裹，offsetTop 失准导致 scrollIntoView 失效
当局部滚动容器的某个祖先元素用了 transform、perspective 或 filter，就会创建新的层叠上下文，导致 element.offsetTop 返回值严重偏差——你算出来的滚动偏移量可能是负几百或几千，scrollTo() 直接跳到不可见位置。
更健壮的替代方案是：
- 用
element.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop计算相对偏移 - 改用
target.scrollIntoView({ block: 'start', behavior: 'smooth' })，但必须确保调用对象是容器本身：container.querySelector('.target').scrollIntoView(...) - 避免把滚动容器包在
transform: translateZ(0)或will-change: transform的父元素里
JS 控制滚动时过早赋值 scrollTop，布局未完成就写入
常见错误写法：container.innerHTML = newHtml; container.scrollTop = savedPos;。此时 DOM 刚插入，样式未计算、高度为 0、scrollHeight 还等于 clientHeight，赋值会被浏览器静默忽略。
正确时机必须等 layout 完成：
- 用
requestAnimationFrame(() => { container.scrollTop = savedPos; })—— 这是唯一能保证样式和尺寸已就绪的钩子 - 赋值前校验是否可滚动：
if (container.scrollHeight > container.clientHeight) - 避免在
display: none父元素中操作，隐藏状态下getBoundingClientRect()返回全 0
滚动位置恢复不是“写一次就行”，而是要卡在浏览器渲染流水线的正确节点上；错过这个窗口，再试十次也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
