-webkit-overflow-scrolling: touch 已废弃，ios 15.4+/safari 16+ 中不仅无效，还会引发 fixed 错位、下拉刷新失灵、滚动掉帧；真正影响流畅度的是容器高度确定性、合成层建立（via height/max-height + will-change: scroll-position/transform: translatez(0)）及 touchmove/scroll 事件必须设 { passive: true }。
-webkit-overflow-scrolling: touch 已失效，新项目必须删掉。 它在 iOS 15.4+ 和 Safari 16+ 中不仅不生效，还会引发 fixed 错位、下拉刷新失灵、滚动掉帧等问题。你看到的“加了更卡”，不是写错了，而是浏览器正在努力忽略这个废弃指令。
为什么加了 -webkit-overflow-scrolling: touch 还是卡
这个属性早已不是“开关”，而是历史遗留干扰项。真正决定滚动是否流畅的，是浏览器能否为容器创建独立合成层，并保持原生事件链畅通：
- 父容器用了
position: fixed或transform，滚动区高度计算异常，合成层无法建立 - 容器高度靠 JS 动态插入内容后才设置（比如
innerHTML+el.style.height），浏览器来不及触发重绘和层提升 - 写了
overflow-y: auto，但子内容实际没超出容器高度，iOS 根本不激活惯性滚动上下文 - 监听了
touchmove却没传{ passive: true }，浏览器被迫阻塞滚动等待 JS 执行 - 容器或其任意祖先设置了
filter、opacity: 0.99、backdrop-filter，强制全层重绘，抵消所有加速效果
移动端滚动真正该配的 CSS 组合
别再找“替代属性”，重点是让 WebKit 主动识别并优化这个容器：
- 给滚动容器设明确的
height或max-height（min-height或百分比需确保父级有确定高度，如html, body { height: 100% }） - 用
will-change: scroll-position提示浏览器准备合成层（iOS 15+ 稳定，旧版无效，别滥用） - 必要时加
transform: translateZ(0)强制 GPU 合成（适用于 iOS 12–15 中部分未自动合成的场景） - 移除所有干扰属性：尤其注意
filter、opacity 、<code>mask不要出现在滚动容器及其祖先上 -
overflow-y: auto必须存在，且子内容高度略大于容器（可用height: calc(100% + 1px)确保判定成立）
touchmove 和 scroll 事件必须加 passive: true
这是最常被跳过、效果却最立竿见影的一环。不设 { passive: true }，浏览器会暂停滚动等待 JS 回调执行完毕，直接导致手势延迟甚至卡顿：
- 错误写法：
el.addEventListener('touchmove', handler) - 正确写法：
el.addEventListener('touchmove', handler, { passive: true }) - 同样适用于
scroll事件：el.addEventListener('scroll', handler, { passive: true }) - 如果确实需要调用
e.preventDefault()（比如自定义拖拽），请改用{ passive: false }并明确声明，避免隐式 fallback
现代 iOS 滚动流畅性的关键，从来不是加什么私有前缀，而是让容器尺寸可预测、合成层可建立、事件流不被阻断。那些还在调试 -webkit-overflow-scrolling 是否拼写正确的项目，大概率正踩在三个更基础的坑上：高度没定死、passive 没设、或者某层祖先偷偷加了 filter。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
