scroll-snap-type 和 scroll-snap-align 在 IE、旧 Edge、Android 4.x 及 iOS 15.3 及更早版本中均不支持，Safari 15.4 以下静默失效，iOS 需额外配置 overflow-y: scroll + overflow-x: hidden + touch-action: pan-y + 非 body 容器才可能生效。
scroll-snap-type 和 scroll-snap-align 在 IE、旧 Edge、Android 4.x 及 iOS
为什么 iOS Safari 13.3 之前 scroll-snap 不生效
iOS Safari 对 scroll-snap 的支持极其苛刻，不是版本够了就行。它要求同时满足三个条件才触发吸附逻辑：
- 容器必须显式设置
overflow-y: scroll（垂直）或overflow-x: scroll（水平），auto或hidden都不行 - 另一轴必须设为
hidden：垂直滚动时需加overflow-x: hidden，否则横向干扰会破坏吸附判定 - 必须声明
touch-action: pan-y（垂直）或touch-action: pan-x（水平），否则系统默认拦截 touch 事件，滑动变拖拽、松手即停止、毫无吸附感
漏掉任一条件，scroll-snap-type: y mandatory 就像没写过一样——DevTools 里能看到样式，Computed 值却是 none。
IE11 和旧 Edge（≤18）根本无视 scroll-snap 规则
IE11 及旧 Edge 完全不解析 scroll-snap-type 和 scroll-snap-align，整条 CSS 声明被浏览器跳过，不报错也不警告。这不是“兼容性差”，是语法层面不认识。
立即学习“前端免费学习笔记（深入）”；
- 不要用
@supports (scroll-snap-type: y mandatory)包裹 scroll-snap 样式——IE11 连@supports语法规则都不认识，整块 CSS 被丢弃，连外部 fallback 都进不去 - 真正安全的写法是：把 scroll-snap 样式单独抽离，不依赖
@supports，也不指望它在旧浏览器里“优雅降级”，而是接受它“不存在”这个事实 - 如果业务强依赖吸附（如轮播图），就得 JS 实现：监听
scroll+getBoundingClientRect()+scrollTo()模拟，但要注意 iOS Safari 的scrollTo({ behavior: 'smooth' })在 iOS 13.4+ 才支持
Android WebView 和微信内置浏览器的常见失效点
Android 5–7 的 WebView（尤其微信 X5 内核）对 scroll-snap 支持极不稳定，即使写对了语法，也可能因父容器样式导致吸附失效：
-
transform、filter、will-change等属性会让容器脱离普通文档流，破坏 scroll-snap 上下文 -
overflow: hidden在父级使用，常导致子容器滚动条被裁切，吸附点坐标计算偏移 - 滚动容器不能是
<body>或<html>—— 必须用包裹层，例如<div class="snap-container">，否则 iOS 和部分 Android WebView 直接忽略
验证方式很简单：在 DevTools 里临时删掉父级的 transform，看吸附是否恢复。若恢复，就说明是层叠上下文干扰，而非 scroll-snap 本身不支持。
如何让新旧浏览器都“看起来一致”
没有统一的 CSS 降级方案，只能分层处理：
- 现代浏览器（Chrome ≥ 69 / Firefox ≥ 68 / Safari ≥ 14 / Edge ≥ 79）：直接用
scroll-snap-type+scroll-snap-align，配合overscroll-behavior: contain隔离嵌套滚动 - iOS 12–13.3：补全
overflow-y: scroll+overflow-x: hidden+touch-action: pan-y三件套，缺一不可 - IE11 / 旧 Edge：放弃 CSS 吸附，改用 JS 滚动定位（如
element.scrollIntoView({ block: 'nearest', inline: 'nearest' })），并确保 fallback 交互逻辑完整 - Android 5–7：禁用
transform类修饰，避免在滚动容器上设will-change: transform，优先用纯margin或padding控制间距
真正难处理的不是“怎么写吸附”，而是“怎么让没吸附的浏览器不显得突兀”。比如轮播组件，在不支持的环境里，至少要保证左右箭头可点击、自动轮播不卡死、指示器同步更新——这些 JS 层的兜底，比 CSS 本身更重要。
