-webkit-overflow-scrolling: touch 仅在容器有明确高度、无干扰合成层样式、父级未截断滚动区域时才生效；须配合 overflow-y: auto、min-height: 0 等配置，并警惕被动事件监听等深层性能问题。
-webkit-overflow-scrolling: touch 是 iOS 上修复自定义滚动容器卡顿的必要配置，但仅加这一条远远不够，甚至可能掩盖更深层的问题。
为什么只加 -webkit-overflow-scrolling: touch 会失效
这个 CSS 属性本质是告诉 WebKit 启用原生滚动线程（独立于主线程），但它有严格前提：容器必须有明确的高度、不能被 transform 或 opacity 等触发合成层但未正确隔离的样式干扰、且父级不能有 overflow: hidden 意外截断滚动区域。
常见失效场景包括：
- 父容器使用
flex: 1但未设置min-height: 0，导致子元素高度计算异常 - 滚动容器外层套了
position: relative+z-index，意外创建了新的 stacking context，影响滚动层合成 - 在滚动区域内部用了
will-change: transform但未配对transform: translateZ(0)，反而引发频繁图层重绘
overflow-y: auto 和 overflow-y: scroll 在 iOS 上表现差异极大
iOS Safari 对 overflow-y: scroll 的处理非常激进：即使内容未溢出，它也会强制启用滚动机制并占用合成层资源；而 overflow-y: auto 只在真正需要时才激活，更轻量、更稳定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 永远优先用
overflow-y: auto，除非你明确需要“始终显示滚动条” - 避免在滚动容器上同时设置
overflow-x: hidden和overflow-y: auto—— 某些 iOS 版本会因此禁用-webkit-overflow-scrolling - 如果必须隐藏滚动条，用
::-webkit-scrollbar { display: none; }，而不是靠overflow-x干预
滚动容器高度不明确是 iOS 卡顿最常被忽略的硬伤
iOS 对自定义滚动容器的高度解析比 Android 更严格。若容器高度依赖内容撑开（height: auto）或 flex 布局未设边界，-webkit-overflow-scrolling: touch 会直接退化为普通滚动，失去硬件加速。
可靠写法示例：
.scroll-container {
height: 100vh; /* 或 calc(100vh - 60px) */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* 若嵌套在 flex 容器中，必须加 */
.flex-parent {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex-child {
flex: 1;
min-height: 0; /* 关键：防止 flex 子项高度塌陷 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
真正麻烦的不是怎么加这行 CSS，而是它一旦生效，就容易让人误以为“滚动已优化”，从而忽略事件监听未设 passive: true、图片懒加载未做占位、或列表项内联样式触发重排等更隐蔽的性能瓶颈。
