加 -webkit-overflow-scrolling: touch 可解决 ios 滚动卡顿，前提是容器有明确高度约束且 overflow-y 为 scroll 或 auto；否则无效，并可能引发 z-index 错乱、fixed 定位异常、回弹冻结等问题，需配合 overscroll-behavior 或事件拦截等措施。
直接加 -webkit-overflow-scrolling: touch 就能解决大部分卡顿
绝大多数 iOS 滚动卡顿，不是 JS 逻辑问题，也不是网络慢，而是滚动本身没走硬件加速通道。加上这行 CSS 后，WebKit 会把滚动交由原生滚动线程处理，启用惯性回弹和 GPU 渲染，帧率立刻从掉帧变稳定 60fps。
关键前提是：容器必须有明确的、可计算的高度约束（不能靠内容撑开），且 overflow-y 设为 scroll 或 auto。
- 错误写法：
.list { overflow-y: scroll; -webkit-overflow-scrolling: touch; }—— 父容器没设高，子元素高度由内容决定，滚动失效 - 正确写法：
.list { height: 300px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } - 更稳妥写法：用
max-height+min-height组合，避免固定高在响应式中错位
-webkit-overflow-scrolling: touch 会引发 z-index 层级错乱
这个属性会强制创建一个独立的合成层（compositing layer），但它不遵循常规的 stacking context 规则。常见现象是：下拉菜单、弹窗、输入框浮层被滚动区域“吃掉”，点不到、盖不住、焦点丢失。
- 最简修复：给弹层类元素加
transform: translateZ(0)或will-change: transform，主动触发新合成层 - 避免嵌套：不要在已设
touch的容器内部再设另一个带该属性的子容器 - 慎用
position: fixed：iOS Safari 对 fixed 元素在 touch 滚动区内的定位支持不稳定，优先改用position: absolute+ 手动监听scroll更新位置
滚动到底部后上拉卡住？这是回弹结束时的事件冲突
典型现象：滑到容器底部，松手回弹结束瞬间再往上拉，整个滚动区域冻结 1–2 秒才恢复。本质是 touch 结束后，系统误判为 overscroll，触发了默认的页面级回弹，而你的容器又没接管事件流。
- 加
overscroll-behavior-y: contain（现代方案）：阻止滚动穿透到父级或 body，iOS 13+ 支持良好 - 降级兼容：监听
touchmove，当scrollTop + offsetHeight >= scrollHeight且方向向下时，调用e.preventDefault() - 别依赖
iNoBounce全局注入：它会劫持所有滚动容器，容易和 better-scroll、swiper 等插件冲突，建议只对特定 class 显式启用
真机调试时发现没生效？检查 Safari 设置和渲染上下文
即使代码完全正确，-webkit-overflow-scrolling: touch 在某些条件下仍会静默失效——不是 bug，是 Safari 的保守策略。
- 禁用「减少动态效果」系统设置会影响它：iOS 设置 → 辅助功能 → 动态效果 → 关闭「减少动态效果」，否则部分回弹行为被抑制
- 父级有
transform或filter会干扰合成层创建：临时移除这些样式验证是否冲突 - 使用
contain: layout paint可能阻断滚动优化：这个 CSS 属性会限制浏览器对子元素的渲染推测，与 touch 滚动机制不兼容 - 真机调试务必用 Safari Web Inspector 连接，看 Elements 面板里该属性是否被划掉（strikethrough），被划掉说明被更高优先级规则覆盖或环境不满足
-webkit-overflow-scrolling: touch 就是最小成本、最高收益的解法。其他所有“增强”手段，都是在它失效之后才需要考虑的备选路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
