原生 scroll-snap 在 iOS 和 Android 上表现差异源于滚动引擎对 CSS 解释逻辑不同：iOS Safari 保帧率弱化吸附精度，Android WebView 常因合成层未启用跳过捕捉；iOS 15.4 前不支持 center 对齐，且需固定高度、禁用 transform 等干扰样式；安卓需同时满足 scroll-snap-stop: always、overflow-y: scroll、固定容器高度等条件；滚动惯性问题须加 overscroll-behavior: contain；scroll-padding 设置不当易致重排退化；真机验证需结合 scrollend 事件与 getBoundingClientRect 校验停靠位置。
原生 scroll-snap 在 iOS 和 Android 上不是“写法不对”，而是滚动引擎对同一套 CSS 的解释逻辑不同——iOS Safari 更倾向保帧率而弱化吸附精度，Android WebView（尤其旧版）则常因合成层未启用直接跳过捕捉逻辑。直接降级 JS 或硬加 mandatory 反而放大差异。
为什么 iOS 上 scroll-snap-align: center 不生效或错位？
iOS 15.4 之前根本不支持 scroll-snap-align: center，只认 start 和 end；即使在新版本中，若子项高度不固定（比如内容动态撑开），center 对齐也会因布局测量延迟而偏移。Safari 还会把 min-height: 100vh 当作“非确定高度”，拒绝触发 snap 区域注册。
- 必须给每个子项设明确
height: 100vh（不能用min-height或flex: 1） - 避免父容器有
transform、will-change或contain: layout，这些会破坏 iOS 的滚动上下文识别 - 真机测试时，用 Safari 开发者工具勾选 “Scroll snapping regions”，看是否识别出蓝色吸附区域——没亮就说明根本没启用
安卓 WebView 中 scroll-snap-type 完全不触发怎么办？
不是属性漏写了，而是安卓 WebView（尤其 Samsung Internet、Chrome 65–90）压根没开启 scroll snap 合成优化。典型表现：手指松开后滚动直接惯性停住，像没写 scroll-snap-type 一样。
- 必须同时满足三个条件：
scroll-snap-stop: always显式加在每个子项上、容器设overflow-y: scroll（不能是auto）、子项设scroll-snap-align: start - 容器高度必须是固定值（如
height: 100vh），max-height或100dvh在部分机型上会失效 - 移除所有可能干扰布局流的样式：避免子项用
flex: 1、transform、position: absolute
滚动惯性冲过 snap 点或回弹卡顿怎么解？
这不是吸附失败，而是 overscroll 弹性行为和 snap 时机冲突。iOS 快速甩动时容易冲过头再回弹，Android 则常因 overscroll-behavior 缺失导致父容器被拖动，打断吸附流程。
立即学习“前端免费学习笔记（深入）”；
- 给滚动容器加
overscroll-behavior: contain，阻止滚动穿透和弹性效果 - 全屏轮播场景下，同时给
body加overscroll-behavior-y: none防止下拉刷新干扰 - 慎用
scroll-behavior: smooth——它和scroll-snap在部分安卓机型存在竞态，首次滚动常不吸附 - 安卓低端机可加
touch-action: pan-y禁用横向惯性，减少误触引发的垂直滚动中断
scroll-padding 设置不当引发卡顿或偏移
scroll-padding 是隐藏最深的性能雷区：过大值、含 env() 的 calc()、或与 scroll-margin 混用，都会让浏览器反复重排，尤其在 Safari 和旧 WebView 中直接退化为普通滚动。
- 垂直滚动推荐
scroll-padding-top: 64px（固定导航栏高度），别用50vh或无依据的大数值 - Safari 中
env(safe-area-inset-top)在首次加载时常失效，临时方案是 JS 动态写入document.documentElement.style.scrollPaddingTop - 避免同时设置
scroll-padding-top: 64px和子项scroll-margin-top: 20px，叠加计算会让部分内核放弃吸附
真正难的不是写对属性，而是在真机上验证每一步：iOS 要测甩动后的回弹响应，Android 要看首次滚动是否吸附、快速连滑是否跳项。UA 检测只是起点，关键得用 scrollend 事件监听 + getBoundingClientRect() 校验实际停靠位置，才能确认是渲染问题还是逻辑偏差。
