-webkit-overflow-scrolling 已废弃，ios 15+/safari 15.4+ 中无效且可能引发渲染异常；现代方案需同时满足：容器有明确高度（或 max-height）、overflow-y: auto/scroll、启用原生滚动行为。
iOS Safari 里滚动卡顿、没惯性，-webkit-overflow-scrolling 还管用吗？
不管用。这个属性在 iOS 15+ 和 Safari 15.4+ 已被废弃，开启后不仅无效，还可能触发渲染异常或导致 fixed 元素错位。它只在 iOS 8–14.3 期间稳定生效，现在强行加 -webkit-overflow-scrolling: touch 属于“写了个寂寞”。
真正起作用的是现代 CSS 的组合策略：必须同时满足三个条件——容器有明确高度（或 max-height）、overflow-y: auto（或 scroll）、且启用原生滚动行为。Safari 现在靠 scroll-behavior 和滚动容器的渲染上下文自动启用惯性，不再依赖私有前缀。
为什么加了 -webkit-overflow-scrolling: touch 反而更卡？
这是个典型的历史包袱问题。该属性会强制创建一个独立的合成层（composited layer），但新版 WebKit 对这种手动分层的调度逻辑已重构，反而容易引发：
- 层爆炸（layer explosion）：子元素频繁重绘，CPU 占用飙升
- fixed 定位元素脱离 viewport 坐标系，出现“悬浮错位”
- 与
transform: translateZ(0)冲突，触发双重合成，掉帧明显
移动端滚动惯性失效的真正原因和修复点
90% 的问题其实和 CSS 无关，而是布局或交互阻断了原生滚动链路：
- 容器父级设置了
overflow: hidden，把滚动截断在上层 - 滚动区域内部用了
position: absolute+top: 0模拟滚动，绕过了系统滚动机制 - 监听了
touchstart但没调用event.preventDefault()，导致 Safari 默认滚动被抑制 - 容器高度由内容撑开（height: auto），没有可滚动的“边界”，
overflow形同虚设
正确做法是：给滚动容器设 max-height: 60vh（或具体 px/em 值），配 overflow-y: auto，并确保内部不拦截 touch 事件流。不需要任何 -webkit- 前缀。
要不要用 JavaScript 模拟惯性滚动？
不要。除非你在做 canvas 游戏或自定义滚动条 UI，否则 JS 滚动模拟（如 iScroll、better-scroll）在 iOS 上必然比原生慢半拍，且无法响应系统级的“快速滑动—回弹”物理曲线。它们还会干扰页面缩放、双击放大、光标定位等原生能力。
唯一合理使用场景是：需要在滚动中精确控制元素视差或触发复杂交互动画。即便如此，也建议用 passive: true 的 touchmove 监听 + getBoundingClientRect() 计算位置，而不是接管整个滚动逻辑。
惯性不是“加个属性就能有”的功能，它是浏览器对滚动容器、渲染层、输入事件三者协同的结果。漏掉任意一环，比如忘了设高度、误加了阻止默认行为、或者嵌套了 overflow-hidden 父容器，惯性就直接消失——而且不会报错，只默默变沉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
