旧版 WebView 中 scroll-snap-type 不触发吸附，scrollTop 始终为 0 或跳变，scroll 事件仅在起止位置触发；需用 scrollend 或 setTimeout 检测滚动结束，再 scrollTo 强制对齐，并基于 offsetTop 计算目标位置。
scroll-snap-type 在旧版 WebView（如 Android 10–12 系统 WebView、Samsung Internet 旧版）中根本不会触发吸附，不是“不顺滑”，而是 scroll 事件照常触发但 scrollTop 始终为 0 或跳变 —— 这意味着你用 JS 监听 scroll 并读取 scrollTop 或 pageYOffset 来做逻辑判断，基本无效。
scroll 事件监听为何在 scroll-snap 下失效
启用 scroll-snap-type 后，浏览器会接管滚动行为：手指松开后，不是继续惯性滚动，而是立即启动合成层动画跳转到最近的吸附点。这个过程绕过了常规滚动帧，scroll 事件只在起始和最终位置触发（甚至只在最终位置），中间无连续值；document.documentElement.scrollTop 在多数时刻仍为 0，因为滚动容器本身没“动”，是子项被强制位移或视口被重映射。
常见错误现象：
- 监听
scroll事件，console.log(window.pageYOffset)总是输出0或整屏倍数（如0、100vh、200vh），没有中间过渡值 - 用
requestAnimationFrame轮询scrollTop，结果仍是离散跳变，无法做平滑动画或进度条 - 依赖
scroll实现导航高亮、视差、懒加载，全部失准
安卓 WebView 中 scroll-snap-type 不生效的硬性条件
不是写错属性，而是旧内核要求更严格的 DOM + CSS 组合才能激活 snap 引擎。缺一不可：
-
scroll-snap-stop: always必须显式加在每个子项（如.slide）上，仅靠父容器mandatory不够 - 滚动容器必须有**固定 height**（不能是
min-height: 100vh或height: 100dvh），且设overflow-y: scroll（auto在部分 WebView 中被降级） - 子项必须设
scroll-snap-align: start（center在 flex 容器中易失效），且不能被transform、flex: 1、position: absolute扰乱布局流 - 滚动容器需加
touch-action: pan-y（横向为pan-x），否则 touch 事件被系统拦截，snap 逻辑不参与
当 CSS snap 彻底失效时，JS 驱动对齐的 fallback 方案
不要试图在旧 WebView 中“修复” scroll 事件，直接换策略：监听滚动结束，再用 scrollTo 强制对齐。关键在于检测时机和兼容性兜底：
- 优先用
scrollend事件（Chrome 93+、Android Chrome 支持，但 Samsung Internet 和旧 WebView 不支持） - fallback 到
setTimeout+ 检测scrollingElement.scrollTop是否稳定（连续两帧不变视为结束） - 对齐时用
element.scrollTo({ top: targetY, behavior: 'smooth' })，但注意：旧 WebView 中behavior: 'smooth'常退化为instant，此时需手动用requestAnimationFrame分帧滚动模拟 - 目标位置必须基于子项真实
offsetTop计算，别依赖scrollTop反推 —— 因为它不准
为什么不用 jQuery 的 .scroll() 或 .on('scroll')
jQuery 的 .scroll() 本质还是绑定原生 scroll 事件，同样受上述限制。更麻烦的是，某些旧 WebView 中，给 window 绑定 scroll 会被容器的 overflow: scroll 阻断（事件不冒泡），导致监听完全静默。实测中，直接监听滚动容器元素（如 document.querySelector('.main').addEventListener('scroll', ...)）比监听 window 更可靠，但仍无法解决 scrollTop 为 0 的根本问题。
真正容易被忽略的点：scroll-snap 的吸附行为在旧内核里是“全有或全无”，没有中间态；而 JS 滚动监听的思维惯性是“连续采样”，两者底层机制冲突。与其硬调，不如明确分层 —— 新浏览器走 CSS snap，老设备降级为 JS 驱动，且 JS 层彻底放弃依赖 scrollTop 的连续值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
