-webkit-overflow-scrolling: touch 在 ios 15.4+ 和 safari 16.4+ 中已被主动忽略，强行保留反而干扰滚动管线，导致 fixed 错位、下拉刷新失灵和惯性丢失；真正起效的是明确高度、合成层触发与 { passive: true } 监听器。
为什么加了 -webkit-overflow-scrolling: touch 还是卡
这行 CSS 在 iOS 15.4+ 和 Safari 16.4+ 中已被浏览器主动忽略，不是“没生效”，而是被降级或丢弃。强行保留反而干扰滚动管线，引发 fixed 错位、下拉刷新失灵、惯性丢失。你看到的卡顿，大概率是它在拖后腿——不是没加对，是不该加。
真正起效的三要素：高度 + 合成层 + { passive: true }
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或未设高，子元素无法形成独立滚动流 - 滚动区或其任意祖先用了
backdrop-filter、filter、opacity: 0.99，强制重绘并打断合成层 - 内容实际未溢出（
clientHeight ），iOS 不激活惯性上下文 - 外层包裹了
<scroll-view></scroll-view>或position: fixed容器，中断滚动事件冒泡路径
uni-app / 微信小程序里 scroll-view 越用越卡
这不是配置问题，是架构误用：
- 官方明确不推荐用
scroll-view做长列表——它本质是 WebView 内模拟滚动，iOS 对频繁scrollTop变更极其敏感 - 必须配
pages.json中的disableScroll: true，否则页面级滚动和组件滚动抢事件 -
scroll-view必须设固定高度（如height: 100vh），不能靠内容撑高；enhanced="true"有效，但高度不确定时自动降级 - 禁用
scroll-with-animation，动画会强制同步渲染；横向滚动优先用white-space: nowrap+inline-block，比 flex 更稳
最常被忽略的点：删掉 -webkit-overflow-scrolling: touch 后仍卡，先查 { passive: true } 是否漏了，再打开 DevTools 的 Layers 面板看图层数——爆增说明合成层失控，不是滚动逻辑的问题，是样式在反复重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
