scroll-snap 仅控制滚动停止位置，不提供动画；平滑效果需配合 scroll-behavior: smooth 实现，且仅对 scrollto()、scrollintoview() 或锚点链接生效，对原生拖拽滚动无效。
Scroll-snap 本身不提供动画，它只控制滚动停止位置；所谓“平滑锚定动画”必须靠 scroll-behavior: smooth 配合实现，且两者行为独立、不可混为一谈。
scroll-snap-type 和 scroll-snap-align 的基础配对逻辑
触发锚定的前提是容器和子项必须同时声明 snap 行为：父容器用 scroll-snap-type 指定滚动轴向与强制程度（如 x mandatory），子项用 scroll-snap-align 告诉浏览器“我想停在哪儿”（常见值为 start、center、end）。
容易忽略的是：如果子项没有设置 scroll-snap-align，即使父容器写了 scroll-snap-type，也完全不会生效——这不是 bug，是规范要求。
-
scroll-snap-type: x mandatory表示水平滚动必须停在某个子项上，不允许中途悬停 -
scroll-snap-align: center让元素中心对齐容器视口中心，适合卡片式轮播 - 若子项高度/宽度不固定（如含响应式图片），
mandatory可能导致滚动卡死或跳变，此时改用proximity更稳妥
为什么加了 scroll-behavior: smooth 还没动画？
这是最常踩的坑：scroll-behavior: smooth 只影响 JavaScript 调用 scrollTo()、scrollIntoView() 或用户点击锚点链接（<a href="#id"></a>）时的过渡效果，**对原生滚动（手指拖拽、滚轮）无效**。
也就是说，Scroll-snap 的“停顿”动作本身永远是瞬时的，哪怕你写了 scroll-behavior: smooth，用户拖动滚动条到下一个 snap 区域，依然会“啪”一下停住。
- 只有通过
element.scrollIntoView({ behavior: 'smooth' })触发的滚动才真正带缓动 - CSS 中的
scroll-behavior必须写在滚动容器上（如overflow-y: auto的父级），而非 body 或 html - 部分旧版 Safari 对
scroll-behavior: smooth支持不稳定，需加-webkit-overflow-scrolling: touch（仅 iOS 7–12）
手动触发 Scroll-snap 锚定时的兼容写法
想让用户点击按钮就“滑到下一屏”，不能只靠 CSS；得用 JS 显式调用 scrollIntoView，并确保目标元素具备 scroll-snap-align。
示例：一个横向滚动容器里有 3 个 .slide，点击“下一页”按钮跳转：
button.addEventListener('click', () => {
const current = document.querySelector('.slide.active');
const next = current?.nextElementSibling || slides[0];
next.scrollIntoView({ behavior: 'smooth', inline: 'start' });
});
注意 inline: 'start' 是为了匹配 scroll-snap-align: start 的对齐方式；若子项设的是 center，这里就得用 inline: 'center'，否则 snap 会失效。
- 不要用
scrollTop/scrollLeft+animate()模拟，会绕过 scroll-snap 机制，导致 snap 失效 - 移动端监听
touchend后立即调用scrollIntoView，需防多次触发，建议加节流 - 若页面有多个滚动容器，每个都必须单独设置
scroll-behavior: smooth，无法继承
Scroll-snap 的“锚定”和“平滑”其实是两个正交能力：前者由 CSS 布局规则决定停在哪，后者由滚动触发方式决定怎么过去。把它们当成同一套动画来调，十有八九会卡在中间不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
