根本原因是 iOS 15+ 已弃用 -webkit-overflow-scrolling: touch，真正有效方案是 CSS 层级控制（contain: strict + overscroll-behavior）+ 滚动容器隔离（显式 height/max-height）+ JavaScript 补偿（IntersectionObserver + scrollTo）。
移动端局部滚动卡顿，根本原因不是“没加 -webkit-overflow-scrolling: touch”，而是这个属性本身在 iOS 15+ 已被弃用，且对现代滚动行为干预有限。真正起效的方案是组合使用 CSS 层级控制 + 滚动容器隔离 + JavaScript 补偿逻辑。
为什么 -webkit-overflow-scrolling: touch 现在基本失效
该属性在 iOS 12–14 时期确实能激活原生滚动引擎，但苹果从 iOS 15 开始逐步移除对其的支持；Chrome for iOS（基于 WKWebView）也从未真正实现它。现在强行加上，只会掩盖更关键的问题：比如父容器未设 height 或 max-height、内部内容未触发 BFC、或滚动区域被 transform 或 position: fixed 干扰。
常见错误现象：overflow-y: scroll 容器在 iOS 上拖不动、滑两下就停、边缘无回弹、快速滑动时直接跳帧。
- 必须为滚动容器显式设置
height或max-height（不能只靠min-height） - 避免在滚动容器内使用
position: absolute的子元素叠加背景色（iOS 渲染层会崩溃） - 禁用
overscroll-behavior: contain以外的 overscroll 行为，否则可能触发页面整体回弹
用 scroll-behavior + contain: strict 控制滚动层级
现代浏览器（Chrome 89+、Safari 15.4+、Firefox 103+）支持通过 CSS 隔离滚动上下文，比 JS 拦截更轻量、更稳定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给局部滚动容器加
scroll-behavior: smooth（仅影响scrollTo调用，不影响手势） - 紧接其上添加
contain: strict，强制浏览器将其视为独立渲染/滚动单元 - 配合
overscroll-behavior-y: contain阻止滚动穿透到父级 - 若容器内有固定定位浮层（如搜索框），需额外加
will-change: transform避免重绘抖动
示例：
.scroll-area {
height: 300px;
overflow-y: auto;
scroll-behavior: smooth;
contain: strict;
overscroll-behavior-y: contain;
}
当 CSS 不够用时，用 IntersectionObserver + scrollTo 做精准补位
某些场景（如虚拟滚动表格、锚点导航联动）需要滚动后自动对齐某行，此时 CSS 无法满足。但直接用 scrollTop 在 iOS 上常因异步渲染导致偏移不准。
推荐做法是放弃监听 scroll 事件，改用 IntersectionObserver 监听目标元素进入视口，并在回调中调用 element.scrollIntoView({ block: 'nearest', inline: 'start' })。
- 不要用
behavior: 'smooth'，它在 Safari 中兼容性差且易卡顿 - 如果要精确滚动到某个像素位置，用
container.scrollTo({ top: y, behavior: 'auto' })，behavior: 'auto'是唯一全平台稳定的值 - 避免在
scroll事件里频繁调用scrollTo，会触发重入和性能雪崩
别忽略 scrollbar-width 和 scrollbar-gutter 的副作用
隐藏滚动条看似只是视觉优化，但 ::-webkit-scrollbar { display: none } 在 Safari 中会导致滚动容器失去“可滚动”语义，进而让 scrollIntoView 失效或触发意外重排。
更安全的做法：
- 用
scrollbar-width: none（Firefox） +scrollbar-gutter: stable both-edges（Chrome 120+、Safari 17.4+）替代 hack 方式 - 若必须兼容旧版 Safari，保留滚动条但用
opacity: 0.01和pointer-events: none隐藏交互 - 所有滚动容器都应设
scroll-padding-top，防止scrollIntoView时顶部被 sticky 导航遮挡
最易被忽略的一点：iOS 上任何带 transform 的父容器，都会让子级滚动容器丢失硬件加速——哪怕只写了 transform: translateZ(0)，也要确认它没套在滚动区域外层。
