scroll-snap-type需配合scroll-snap-align生效，父容器设scroll-snap-type:x/y mandatory并加overflow，子元素必须设scroll-snap-align:start/center等，且图片尺寸须固定，否则吸附错乱。
scroll-snap-type 本身不提供“图片预览”功能，它只是让滚动容器在滑动后自动吸附到指定元素（比如每张 <img>）——所谓“预览”，其实是靠你把图片排成一列/一行 + 合理设置容器样式实现的。直接套用默认值大概率卡顿、跳图、点不动。
scroll-snap-type 必须配 scroll-snap-align 才生效
只写 scroll-snap-type: x mandatory; 没用，每个要吸附的子元素（如 <img> 或包裹它的 <figure>）必须显式加 scroll-snap-align: start;（横向滚动用 start 或 end，纵向用 center 等）。否则浏览器无视吸附规则。
常见错误现象：
– 滚动后不吸附，直接停在中间
– 只有第一张图能吸，后面全失效
– 在 Safari 上完全没反应（尤其未设 scroll-snap-align 时）
- 横向轮播：父容器设
scroll-snap-type: x mandatory;，每个图片项设scroll-snap-align: start; - 纵向列表预览：父容器设
scroll-snap-type: y mandatory;，每张图设scroll-snap-align: center; - 别忘了给父容器加
overflow-x: auto;（横向）或overflow-y: auto;（纵向），且禁用scroll-behavior: smooth;（它会干扰 snap 的瞬时吸附）
图片宽高必须固定，否则 snap 位置计算错乱
如果 <img> 没设宽高，或用了 width: 100%; + height: auto;，加载过程中尺寸变化会导致 snap 偏移、吸附点漂移，甚至滚动卡死。
立即学习“前端免费学习笔记（深入）”；
- 横向轮播：每张图外层用
flex-shrink: 0;，图片本身设明确width（如width: 100vw;）和height（避免拉伸） - 推荐用
<picture>+<source>配合width/height属性，或 CSS 中写死尺寸（如width: 320px; height: 240px;） - Safari 对百分比宽高的
scroll-snap-align支持不稳定，优先用固定像素或视口单位
移动端 touch 滚动需要额外处理惯性与阻尼
原生 scroll-snap 在 iOS Safari 和部分安卓 WebView 中，touch 滚动松手后惯性过强，容易滑过头、连跳两张；手指慢速拖拽时又可能不触发 snap。
- 加
-webkit-overflow-scrolling: touch;（仅旧版 iOS，已逐步弃用，但部分场景仍需保留） - 用
overscroll-behavior-x: contain;防止滚动穿透到父容器 - 关键：给容器加
scroll-padding-inline-start: 0;（横向）或scroll-padding-block-start: 0;（纵向），避免因边框/内边距导致吸附偏移 - 真机测试必做：iOS 15+ 和 Chrome Android 最新版行为不一致，Safari 对
mandatory的判定更严格，proximity更稳妥但吸附感弱
最易被忽略的是：snap 不是轮播组件，它不提供指示器、按钮、键盘导航或懒加载支持。你要显示当前第几张，得自己监听 scroll 事件算 scrollLeft / scrollTop，再匹配元素位置——这个计算在缩放、横竖屏切换、动态插入图片时很容易出错。
