<p>scroll-snap-type 必须设在可滚动父容器上，且仅对直接子元素生效；容器需设 width 和 overflow-x: auto，卡片须为直接子元素、display: flex + flex-wrap: nowrap、flex: 0 0 [宽度]、scroll-snap-align: center，iOS 需加 -webkit- 前缀并设 touch-action: pan-x。</p>
scroll-snap-type 必须设在容器上，且只对直接子元素生效
很多人把 scroll-snap-type: x mandatory 加在卡片本身或外层 wrapper 上，结果完全没反应——它必须作用于**可滚动的父容器**（比如 div），且该容器需满足两个硬性条件：有明确宽度（width 或 inline-size）、设置 overflow-x: auto（或 scroll），同时禁止 overflow-y: hidden 干扰滚动机制。
常见错误现象：scroll-snap-align 写了但卡片不吸附，大概率是容器没设 scroll-snap-type，或者卡片不是容器的**第一层子元素**（例如中间嵌了 div 或 article）。
- 容器需显式声明
scroll-snap-type: x mandatory（proximity容易滑过头，慎用） - 卡片必须是容器的直接子元素，不能套多一层无关
div - 容器需设
display: flex+flex-wrap: nowrap，否则卡片会换行破坏横向流 - 每个卡片需设
flex: 0 0 [宽度]（如flex: 0 0 300px），确保不被压缩
卡片需用 scroll-snap-align 控制吸附位置，不是靠 margin 或 transform
吸附点由 scroll-snap-align 决定，不是靠给卡片加 margin-left 或用 transform: translateX() 模拟位移。这个属性值只有三个合法取值：start、end、center，对应容器滚动轴上的对齐基准线。
横向滚动时，scroll-snap-align: start 表示卡片左边缘与容器左边缘对齐；center 则让卡片水平居中卡在视口中央——这正是多数卡片轮播想要的效果。
立即学习“前端免费学习笔记（深入）”；
- 卡片统一设
scroll-snap-align: center，容器设scroll-snap-type: x mandatory，才能稳定居中吸附 - 不要混用
scroll-snap-align: start和center在同一组卡片里，行为不可预测 - 若卡片宽度不固定（如用
%或vw），需确保容器宽度也响应式同步，否则吸附位置偏移
移动端 Safari 需要 -webkit- 前缀且禁用 touch-action
iOS Safari 直到 iOS 16.4 才完全支持无前缀的 scroll-snap，低版本必须加 -webkit-scroll-snap-type 和 -webkit-scroll-snap-align。更关键的是，默认 touch-action: pan-y 会阻止横向滚动，导致手指划不动。
错误现象：PC 端正常，iOS 上只能点拖动、无法滑动；或滑动后不吸附，直接惯性滚走。
- 容器必须加
-webkit-scroll-snap-type: x mandatory - 卡片必须加
-webkit-scroll-snap-align: center - 容器必须设
touch-action: pan-x（禁用 vertical，放开 horizontal） - 避免同时设
touch-action: manipulation，它会覆盖pan-x
滚动条干扰和性能细节：隐藏原生滚动条但保留可滚动性
用 overflow-x: auto 会暴露底部滚动条，影响视觉。但直接设 overflow-x: scroll + scrollbar-width: none（Firefox）或 ::-webkit-scrollbar { display: none }（WebKit）只是隐藏，不影响滚动能力。别用 overflow-x: hidden ——那会彻底关掉滚动，scroll-snap 失效。
性能上，scroll-snap 是原生滚动优化，比 JS 的 scrollTo() + debounce 轻量得多，但若卡片内含大量图片或 iframe，仍需懒加载，否则首屏卡顿。
- 隐藏滚动条推荐写法：
scrollbar-width: none（Firefox）+::-webkit-scrollbar { display: none }（Chrome/Safari） - 容器高度建议用
min-height而非固定height，防止内容撑高后截断 - 卡片内图片务必加
loading="lazy"，否则长列表下滚动会卡顿
滚动吸附的精度依赖于容器尺寸、卡片尺寸、缩放比例三者严格匹配，任何一方动态变化（比如窗口 resize 后 rem 计算偏移）都会导致吸附错位——这点容易被忽略。
