-webkit-overflow-scrolling: touch 在 iOS 15.4+/Safari 16+ 已废弃，保留会触发旧滚动引擎导致 fixed 错位、下拉刷新失灵、滚动掉帧及内存泄漏；真正起效的是明确容器高度、will-change: scroll-position、移除 filter/opacity 干扰，以及 touchmove/scroll 事件设 { passive: true }。
-webkit-overflow-scrolling: touch 在 iOS 上不是“失效”，而是被浏览器主动丢弃了——它从 iOS 15.4 和 Safari 16+ 起正式废弃，继续保留反而会触发旧滚动引擎，导致 fixed 错位、下拉刷新失灵、滚动掉帧甚至内存泄漏。
为什么加了 -webkit-overflow-scrolling: touch 还是卡或不动
这不是拼写错误或漏分号的问题，而是该属性已失去控制权。WebKit 不再用它开启硬件加速，也不再据此创建独立 ScrollView。常见现象包括：
- 滚动容器突然无法滑动（尤其父级为
position: fixed或absolute） - 滚动到底部后上拉冻结 1–2 秒（本质是 overscroll 事件穿透到 body）
- 监听
scroll事件时scrollTop停滞不更新 - DevTools 中该声明被标灰，Computed Styles 里完全不出现
根本原因：浏览器检测到该属性后，直接降级回软件滚动路径，并禁用合成层优化。
overflow-y: auto 容器必须有明确高度才能滚动
iOS Safari 不会为高度不确定的容器建立可滚动上下文。哪怕写了 overflow-y: auto，只要容器高度靠 flex 自动撑开、min-height 或 100vh（地址栏展开时跳变），滚动就可能静默失败。
- ✅ 推荐：
height: 100dvh或max-height: 60vh，且确保父级有html, body { height: 100% } - ✅ Flex 场景：
.container { display: flex; height: 100dvh; }+.scroller { flex: 1; overflow-y: auto; } - ❌ 避免：
height: auto、min-height: 100%、100vh（iOS 地址栏展开时会缩容）
真正起效的替代组合（iOS 15+ 必配）
别再找“等效替代属性”，重点是让 WebKit 主动识别并优化这个容器：
- 滚动容器必须带
overflow-y: auto，且子内容真实溢出（scrollHeight > clientHeight） - 显式启用合成提示：
will-change: scroll-position（iOS 15+ 支持良好，旧版无效） - 移除所有干扰样式：尤其是
filter、backdrop-filter、opacity: 0.99及其任意祖先元素 -
touchmove和scroll监听器必须加{ passive: true }，否则滚动会被同步阻塞
示例关键代码：
scroller.addEventListener('touchmove', handler, { passive: true });<br>scroller.addEventListener('scroll', handler, { passive: true });
嵌套滚动和框架组件最容易被忽略的点
像 <scroll-view></scroll-view>（小程序）、<uni-scroll-view></uni-scroll-view>（uni-app）、vue-virtual-scroller 这类封装组件，滚动发生在内部真实节点（如 .scroll-view__content）上。直接给组件标签设样式毫无意义。
- Vue 2：
::deep(.uni-scroll-view-content) { will-change: scroll-position; } - Vue 3：
:deep(.uni-scroll-view-content) { will-change: scroll-position; } - 微信小程序：需在自定义组件样式中单独声明
scroll-view .scroll-content类 - 嵌套滚动时，每一层都得单独声明
will-change和overflow-y，不能只设最外层
复杂点在于：这些限制不是叠加生效，而是逐层失效——某一层缺了明确高度或被动监听，整条滚动链就退化为软件渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
