scroll-snap-stop 是控制子元素是否强制停驻的属性，仅在父容器设 scroll-snap-type 且子元素设 scroll-snap-align 时生效；缺一不可，否则无效。
scroll-snap-stop 是什么，为什么设了没反应
scroll-snap-stop 是 CSS 中控制滚动容器内子元素是否“强制停驻”的属性，但它**只在父容器启用了 scroll-snap-type 且子元素设置了 scroll-snap-align 时才生效**。很多人写了 scroll-snap-stop: always 却没效果，根本原因是：父容器缺少 scroll-snap-type: x mandatory（或 y mandatory），或者子元素没设对齐点。
它不是独立开关，而是“停驻强度”的调节器——normal（默认）允许快速滑动跳过，always 强制每次滚动必须停在该元素上（哪怕用户猛甩）。
scroll-snap-stop: always 必须配合的三要素
缺一不可，否则完全不触发：
- 父容器（如
<div class="carousel">）需设scroll-snap-type: x mandatory（x/y 要和滚动方向一致） - 每个可停驻子项（如
<section>）必须设scroll-snap-align: start（或center/end） - 该子项本身要满足“可被滚动到”的条件：不能
display: none、不能visibility: hidden、不能被父容器overflow: hidden截断内容区域
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.carousel {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
.carousel > section {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 100%;
}
scroll-snap-stop: always 的实际行为边界
它不等于“禁止滑动”，而是约束停驻点。以下情况仍会发生但不违反规则：
- 用户长按拖拽后松手，浏览器仍可能根据惯性滑过多个项（尤其在 macOS Safari 或 Chrome 滚动平滑开启时）
- 用键盘
ArrowLeft/ArrowRight或空格键滚动，always会严格逐项停驻；但触摸板/鼠标滚轮属于“连续滚动”，最终停驻点由浏览器决定 - 若两个相邻子项都设了
scroll-snap-stop: always，且宽度之和小于容器宽，可能出现“卡在中间”的视觉错觉（其实是对齐点计算偏差）
真要彻底禁用跨项滑动，得结合 JS 监听 scrollend 事件 + scrollTo() 校正，scroll-snap-stop 本身做不到。
兼容性和移动端特别注意
Firefox 从 68+、Chrome 75+、Safari 14.1+ 支持 scroll-snap-stop，但 iOS Safari 14.5 之前存在 bug：设了 always 却仍允许跳过。稳妥做法是：
- 始终为父容器加
scroll-behavior: smooth提升体验一致性 - 避免在
transform: scale()或zoom缩放的容器里用 scroll-snap，会导致对齐点偏移 - Android WebView（尤其旧版）可能忽略
always，建议降级为mandatory+scroll-snap-align组合兜底
最易被忽略的一点：父容器必须有明确的 width 或 height（不能靠内容撑开），否则 scroll-snap-type 可能静默失效。
