加 -webkit-overflow-scrolling: touch 在 ios 17 及 safari 16.4+ 中已被彻底弃用，浏览器主动忽略或降级处理，强行保留反而引发 fixed 错位、惯性丢失等卡顿问题；真正起效的是明确高度、合成层触发与 passive: true 事件监听三要素。
加 -webkit-overflow-scrolling: touch 还有效吗？
在 iOS 17 及 Safari 16.4+ 中，-webkit-overflow-scrolling: touch 已被彻底弃用，**不是“失效”，而是浏览器主动忽略或降级处理**。强行保留会干扰滚动管线，引发 fixed 错位、下拉刷新失灵、惯性丢失等问题。iOS 15.4+ 起，WebKit 默认启用原生惯性滚动，加这行反而卡顿。
真正起效的三要素：高度 + 合成层 + 被动事件
现代 iOS 滚动流畅与否，取决于是否同时满足以下三点：
- 滚动容器必须有明确可计算的高度：
height、max-height或100dvh（避免100vh，地址栏展开时跳变） - 父级需提供确定高度上下文，例如：
html, body { height: 100% }；Flex 布局中父容器必须加min-height: 0 -
touchmove和scroll监听器必须显式传{ passive: true }，否则 iOS 会同步阻塞滚动等待 JS 执行
为什么设置了 overflow-y: auto 还是不滚动？
常见原因不是 CSS 写错，而是滚动上下文根本没建立：
- 父容器用了
overflow: hidden或未设高，子元素无法形成独立滚动流 - 滚动区域内部或祖先元素用了
filter、opacity: 0.99、backdrop-filter，强制重绘并打断合成层 - 内容实际未溢出（
scrollHeight ），iOS 不激活惯性上下文 - 用了
content-visibility: auto包裹滚动区，会中断滚动上下文
滚动到底部上拉就冻结？别只盯着 overscroll-behavior
overscroll-behavior-y: contain 能防穿透，但解决不了“松手后上拉卡住 1–2 秒”的问题。这本质是 overscroll 事件穿透到 body 触发页面级回弹，而你的容器没接管事件流。更关键的是：
- 确保滚动容器高度稳定，避免因视口变化（如地址栏收起）导致
clientHeight突变 - 不要在
scroll回调里读取scrollTop或调用getBoundingClientRect()，这会触发同步回流 - 需要动态判断滚动位置时，优先用
IntersectionObserver替代实时监听
-webkit-overflow-scrolling 后，如果仍卡，先检查 passive: true 是否漏了，再看 DevTools 的 Layers 面板图层数是否爆增。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
