scroll-snap-stop: always 无效是因为它必须与 scroll-snap-type 和 scroll-snap-align 配合使用，且容器需可滚动、子项尺寸确定；缺一不可，常见失效源于 scroll-behavior 冲突、尺寸计算异常或浏览器渲染限制。

scroll-snap-stop: always 为什么经常没效果

因为 scroll-snap-stop: always 不是独立生效的“开关”，它必须和容器的 scroll-snap-type、子项的 scroll-snap-align 配合使用，且滚动容器需满足可滚动条件（比如设置了 overflow: auto 或 scroll，且内容溢出）。单独加 scroll-snap-stop: always 到子元素上，浏览器直接忽略。

必须配齐的三要素（缺一不可）

要让每次滚动都强制停在每个吸附点，这三项必须同时存在：

• 滚动容器（如
  ）设置 scroll-snap-type: x mandatory（横向）或 y mandatory（纵向）
• 每个可停靠的子项（如
  ）设置 scroll-snap-align: start（或 center/end），且该子项需有明确尺寸（不能是 height: auto 且无内容撑开）
• 子项上显式声明 scroll-snap-stop: always —— 这是关键：它告诉浏览器“不许跳过这个锚点”，尤其在快速拖拽或 scrollBy() 调用时生效

常见失效场景与修复方式

即使三要素写全，仍可能滑过吸附点。典型原因：


CSS
CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
下载
• scroll-behavior: smooth 和 scroll-snap-stop: always 在部分 Safari 版本中冲突，导致吸附被平滑动画“软化”。临时解法：移除 scroll-behavior，或只在非 Safari 中启用
• 子项用了 flex: 1 或 width: 100% 但父容器未设固定宽高，导致 scroll-snap-align 计算基准丢失。应确保子项有确定的尺寸（例如 flex: 0 0 100% + 父容器 display: flex）
• 快速连续调用 element.scrollIntoView({ behavior: 'smooth' }) 可能触发浏览器优化逻辑，跳过中间吸附点。改用 scrollTo() + scroll-snap-stop: always 更可靠
• Chrome 120+ 对 scroll-snap-stop: always 的实现更严格：若两个吸附点间距小于容器尺寸的 75%，它可能降级为 normal。此时需加大子项间距或缩小容器视口

一个最小可验证示例

.scroller {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto; /* 关键：禁用 smooth */
}
.scroller > section {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 100%;
}

注意：min-width: 100% 比单纯 width: 100% 更稳妥，避免 flex 压缩；scroll-behavior: auto 是显式关闭平滑滚动，防止干扰吸附逻辑。

真正难的不是写对这三行 CSS，而是当用户手指划过触屏、或滚轮快速滚动时，浏览器是否真的尊重“必须停”——这取决于渲染管线调度、设备帧率、以及你有没有无意中引入弹性布局塌陷或隐式 overflow:hidden。多在真机上测拖拽惯性，别只信 devtools 里的鼠标滚轮。