-webkit-overflow-scrolling: touch 在 ios 13+ 已失效，现代 safari 默认启用原生惯性滚动；真正优化需聚焦合成层（will-change/transform）、passive 事件监听及确定容器高度。
-webkit-overflow-scrolling: touch 在 iOS 13+ 已完全失效，现代 Safari（iOS 16.4+、macOS Safari 17+）默认启用原生惯性滚动，加它反而可能引发卡顿、position: fixed 错位、下拉刷新失灵等问题。真正要解决移动端列表滚动不流畅，得从合成层、事件监听和容器约束三方面动手。
为什么加了 -webkit-overflow-scrolling: touch 还是卡
不是属性写错了，而是它被其他样式或行为“抵消”了。这个属性只在极窄的兼容窗口内起作用：必须同时满足「有明确 height 或 max-height」「position: static（或未触发新层叠上下文）」「内容真实溢出」三个条件。
- 父容器用了
position: fixed或transform，导致子滚动区高度计算异常 - 高度靠 JS 动态撑开（比如插入
innerHTML后才设高），合成层没及时创建 - 容器设了
overflow-y: auto，但内容实际没超出，iOS 不会激活 touch 滚动回弹 - 外层用了
filter、opacity: 0.99、backdrop-filter等强制重绘属性，间接禁用原生滚动加速 - 监听了
touchmove并无条件调用e.preventDefault()——浏览器直接交出滚动控制权，该属性彻底失效
真正有效的 CSS 组合写法（iOS 15+ 稳定生效）
重点不是加 hack，而是让浏览器把滚动容器识别为独立合成层，并避免触发重排重绘。
- 给滚动容器加
will-change: scroll-position：仅对明确需要优化的容器（如.list-container）使用，提前提示浏览器准备合成层；iOS 15+ 才稳定，旧版无效 - 必要时加
transform: translateZ(0)或transform: translate3d(0, 0, 0)：适用于 iOS 12–15 中部分未自动合成的场景；注意它会创建新 stacking context，可能影响z-index和遮罩逻辑 - 确保容器有显式
height或max-height（不能是min-height或靠内容撑开） - 移除所有干扰属性：避免在滚动容器及其祖先上使用
filter、opacity 、<code>backdrop-filter
scroll 和 touchmove 事件必须配 { passive: true }
这是最常被忽略、效果最立竿见影的优化点。不设 { passive: true }，浏览器会阻塞滚动等待 JS 执行完毕，导致掉帧甚至手势延迟。
- 必须加的事件：
touchstart、touchmove、scroll（尤其是 overflow 容器内的scroll） - 正确写法：
el.addEventListener('touchmove', handler, { passive: true }) - 如果必须阻止默认行为（如拖拽排序），改用
{ passive: false }显式声明，并仅在必要时调用preventDefault()
滚动穿透和边界行为要用 overscroll-behavior 控制
列表滑到底部继续拖，底层页面跟着滚？这不是滚动不流畅，是滚动链没切断。
-
overscroll-behavior-y: contain是首选：阻止滚动穿透，保留 iOS 弹性回弹反馈 - 不要用
none——它会移除用户预期的触底回弹，体验变生硬 - 该属性需配合
overflow-y: auto才生效，且对父级无效，必须直接作用于滚动容器
真正卡顿的根源往往不在 CSS 属性本身，而在于合成层没建立、事件监听阻塞主线程、或容器尺寸计算不稳定。加一行 -webkit-overflow-scrolling: touch 的时代已经过去，现在要盯住的是 will-change 是否合理、passive 是否漏设、以及高度是否真的“确定”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
