ios safari 中 scroll-snap-type 长期存在严重缺陷，与 overscroll-behavior、transform、will-change 共存时会静默失效；需避开相关组合，或改用 touch-action + js 模拟 snap 行为。
scroll-snap-type 在 iOS Safari 中根本不可靠
不是你写错了，是 iOS Safari 对 scroll-snap-type 的支持长期存在严重缺陷：它会和 overscroll-behavior、transform、will-change 中任意一个共存时直接失效，且不报错、不降级、不提示。你看到“没生效”，大概率是 Safari 默默跳过了整个滚动捕捉逻辑。
常见组合踩坑点（必须避开）
以下任意一条都会让 scroll-snap-type 在 iOS Safari 上静默失效：
- 父容器设置了
transform: translateZ(0)或will-change: transform—— 即便只是为了触发硬件加速，也会破坏 scroll-snap 链路 - 滚动容器同时加了
overscroll-behavior-y: contain—— Tailwind 的overscroll-y-contain和scroll-snap-type是互斥的 - 滚动容器没有明确的
height或max-height，仅靠overflow-y-auto无法稳定触发 snap 点计算 - 子项使用了
flex布局但未设flex-shrink: 0，导致 snap-align 计算偏移
替代方案：用 touch-action + JS 模拟 snap 行为
当原生 scroll-snap-type 不可控时，更稳妥的做法是放弃它，改用可预测的控制方式：
- 给滚动容器加
touch-pan-y（即touch-action: pan-y），防止横向误触触发页面滚动 - 监听
scroll事件，用scrollTo({ behavior: 'smooth' })主动对齐到最近 snap 点 - 避免依赖
scroll-snap-align，改用固定高度子项 +getBoundingClientRect()计算位置
这类方案在 iOS Safari 上行为一致，且能配合 requestIdleCallback 控制性能开销。
检查是否真被编译进 CSS
Tailwind 默认不会把 scroll-snap-type 相关类打包进去，除非你在 content 配置中实际用到了它们。确认你的 tailwind.config.js 包含类似：
content: [
'./src/**/*.{vue,js,ts,jsx,tsx}',
'./index.html'
]
并且 HTML 或组件里真实写了 scroll-snap-type: y mandatory 对应的类（如 scroll-snap-y、scroll-snap-mandatory）。否则构建后 CSS 根本不存在这条规则 —— 浏览器当然不执行。
真正难处理的是 Safari 对 scroll-snap 的“半实现”状态：它既不完全支持，也不明确报错，而是随机选择忽略。与其反复调试 CSS 属性组合，不如在需要强一致性的场景下主动接管滚动逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
