-webkit-overflow-scrolling: touch 已废弃，ios 15.4+/safari 16+ 中不仅无效，还会引发 fixed 错位、下拉刷新失灵、滚动掉帧；真正决定流畅度的是容器高度确定性、合成层建立（via height/max-height + will-change: scroll-position）及 touchmove/scroll 事件设 { passive: true }。
加 -webkit-overflow-scrolling: touch 不再可靠，iOS 15.4+ 和 Safari 16+ 已将其标记为废弃，强行保留反而引发 fixed 错位、滚动掉帧、下拉刷新失灵等问题。真正起效的是容器合成层是否被正确建立，以及事件链是否畅通。
为什么加了 -webkit-overflow-scrolling: touch 还是卡
这个属性在新系统里不是“失效”，而是被浏览器主动忽略或降级处理。它不再能触发硬件加速，反而可能干扰渲染管线。常见误判点包括：
- 容器高度靠
height: auto或 flex 内容撑开，WebKit 无法确认可滚动范围 - 父级用了
position: fixed、transform或filter，导致滚动上下文被截断或图层分离失败 - 监听了
touchmove但没传{ passive: true }，浏览器被迫同步阻塞滚动等待 JS 执行 - 子内容实际未溢出（
scrollHeight ），iOS 根本不激活惯性滚动上下文
必须配的 CSS 组合（iOS 15+ 稳定生效）
别再单独写 -webkit-overflow-scrolling。以下三者缺一不可：
- 滚动容器设明确高度：
height、max-height或100dvh（避免用100vh，地址栏展开时会跳变） - 确保父级有确定高度，例如：
html, body { height: 100% }；Flex 容器中需加min-height: 0 - 显式启用滚动提示：
will-change: scroll-position（iOS 15+ 支持良好，旧版无效，不滥用） - 移除所有干扰合成层的样式：尤其是
filter、opacity: 0.99、backdrop-filter、mask及其祖先元素
touchmove 和 scroll 事件必须带 { passive: true }
这是最常被跳过、效果却最立竿见影的一环。不设该选项，iOS Safari 会暂停滚动等待 JS 回调返回，直接造成手势延迟甚至冻结：
- 错误写法：
el.addEventListener('touchmove', handler) - 正确写法：
el.addEventListener('touchmove', handler, { passive: true }) - 同理适用于
scroll事件：el.addEventListener('scroll', handler, { passive: true }) - 若需在特定条件下阻止默认行为（如拖拽排序），改用
{ passive: false }并仅在必要时调e.preventDefault()
滚动到底部上拉冻结？优先用 overscroll-behavior-y: contain
回弹结束瞬间上拉卡住 1–2 秒，本质是 overscroll 事件穿透到 body 触发页面级回弹，而你的容器没拦截。现代解法是：
- 直接加：
overscroll-behavior-y: contain（iOS 13+、Safari 16+ 原生支持） - 降级方案：监听
touchmove，当scrollTop + offsetHeight >= scrollHeight且滑动方向向下时，调e.preventDefault() - 避免全局注入 iNoBounce 类库——它会劫持所有滚动容器，极易与
better-scroll、swiper等插件冲突
真正难的不是加哪行 CSS，而是让整个渲染路径不被任意一个看似无关的样式或事件监听打断。比如 will-change: scroll-position 在 iOS 15+ 有效，但在 iOS 12–14 下毫无作用；100dvh 解决了地址栏跳变，但需确认运行环境是否支持。这些细节不验证真机，光看文档永远踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
