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 到子元素上，浏览器直接忽略。
必须配齐的三要素（缺一不可）
要让每次滚动都强制停在每个吸附点，这三项必须同时存在：
- 滚动容器（如
<div class="scroller">）设置 <code>scroll-snap-type: x mandatory（横向）或y mandatory（纵向） - 每个可停靠的子项（如
<section></section>）设置scroll-snap-align: start（或center/end），且该子项需有明确尺寸（不能是height: auto且无内容撑开） - 子项上显式声明
scroll-snap-stop: always—— 这是关键：它告诉浏览器“不许跳过这个锚点”，尤其在快速拖拽或scrollBy()调用时生效 -
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。此时需加大子项间距或缩小容器视口
常见失效场景与修复方式
即使三要素写全，仍可能滑过吸附点。典型原因：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
一个最小可验证示例
.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 里的鼠标滚轮。
