iOS Safari 局部滚动容器不支持 scroll-behavior: smooth，需用 JS 的 scrollTo/scrollIntoView 并设 behavior: 'smooth'，且容器须有明确高度、无样式干扰、事件监听加 passive:true，避免滥用 will-change。
移动端局部滚动容器在 iOS 中无法默认启用平滑滚动，不是 CSS 写错了，而是 Safari 的滚动引擎压根不触发该行为——它只对整页滚动（html）或明确标记的可滚动上下文做惯性处理，而局部容器必须靠显式声明 + 合成层提示 + 事件优化三者协同才可能生效。
scroll-behavior: smooth 在局部容器上根本不会被 Safari 解析
iOS Safari 直到 15.4 才开始支持 scroll-behavior: smooth，且仅限于 html 元素；对任意 div 类滚动容器（如 .list { overflow-y: auto; }），该 CSS 规则会被静默丢弃，既不报错也不降级。即使你写了 .list { scroll-behavior: smooth; }，computed styles 里也看不到它生效。
- 验证方式：在 Safari 开发者工具中检查目标容器的 computed styles，确认
scroll-behavior值是否为smooth—— 大概率是auto或未定义 - 替代方案：必须用 JS 主动调用
element.scrollIntoView({ behavior: 'smooth' })或container.scrollTo({ top: y, behavior: 'smooth' })，并确保传入behavior参数 - 注意：
scrollIntoView()默认是behavior: 'auto'，漏写参数就等于放弃平滑
局部滚动容器必须满足“可识别滚动范围”这个硬条件
iOS 只有在滚动容器具备确定高度、无弹性干扰、且脱离文档流干扰时，才会激活原生惯性滚动上下文。靠 height: auto、flex 内容撑开、或 100vh（地址栏展开时塌缩）都会让容器失效。
- 必须设置明确的
height或max-height，不能依赖min-height或父级 flex 撑开 - 若容器在 flex 布局中，其父元素需加
min-height: 0，否则 Safari 会忽略其可滚动性 - 避免祖先元素带
filter、opacity: 0.99、backdrop-filter，这些会破坏合成层，导致滚动降级为软件渲染
touchmove 和 scroll 事件不设 passive 会导致帧率暴跌
这是最常被跳过、效果却最立竿见影的一环。iOS 上若未显式声明 { passive: true }，浏览器必须暂停滚动等待 JS 回调执行完毕，帧率可能从 60fps 直接掉到 20fps。
- 错误写法：
el.addEventListener('touchmove', handler) - 正确写法：
el.addEventListener('touchmove', handler, { passive: true }) - 同理适用于
scroll：el.addEventListener('scroll', handler, { passive: true }) - 若需阻止默认行为（如拖拽排序），改用
touchstart+e.preventDefault()，别在scroll或touchmove里调
will-change 和 transform 的滥用反而破坏滚动性能
给滚动容器本身加 will-change: scroll-position 在 iOS 15+ 有效，但给每个子项（如 .item）加 will-change: transform 是典型翻车操作——一屏 10 个，滚动中常驻 20+ 图层，中低端安卓机显存吃紧，帧率直接跌破 20fps。
-
will-change: scroll-position只应在 iOS 15+ 局部滚动容器上谨慎使用，旧版无效 - 别对滚动容器加
transform: translateZ(0)：iOS 12–15 中可能有用，但在 iOS 15+ 已非必需；且容易引发回弹抖动 - 绝对不要对列表项加
will-change: transform或opacity，这会强制创建大量图层，严重拖慢渲染
真正卡顿的根源往往不在“怎么让它动”，而在“为什么 Safari 不把它当可滚动容器看待”——高度不确定、祖先样式干扰、事件监听器阻塞、图层爆炸，这四点踩中任意一个，平滑滚动就只是 CSS 里一句没用的声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
