scroll-snap-type 触发不了点对点滚动的根本原因是父容器缺少 overflow-x: auto 和子项未设 scroll-snap-align；需确保布局精确、事件兼容，并避免 JS 与手势竞争。
scroll-snap-type 触发不了点对点滚动
常见现象是加了 scroll-snap-type: x mandatory; 但滚动依然“滑过”而非停在指定位置。根本原因不是属性写错，而是父容器缺了两个关键前提：必须有明确的 overflow-x: auto;（或 scroll），且子项必须用 scroll-snap-align: start;（或 center）声明停靠点。
使用场景多见于横向轮播图容器，比如 .carousel 包裹一组 .slide。注意：如果子项用了 flex 布局但没设 flex-shrink: 0;，它可能被压缩导致宽度不足、无法触发 snap；如果父容器宽度假设为 100vw，但内部有 padding 或 border，也会破坏对齐精度。
-
scroll-snap-type必须作用在可滚动容器上（通常是父级），不能写在 body 或全局 - 每个可停靠的子项必须单独加
scroll-snap-align，仅靠父级设置无效 - Chrome 和 Safari 支持良好，但 Firefox 对
scroll-snap-stop: always;（强制停靠）支持有限，别依赖它做关键逻辑
轮播图左右箭头失效或跳转不准
用 JavaScript 控制 scrollTo() 实现箭头时，容易忽略 scroll-snap 的“阻尼效应”——浏览器会在你调用后自动微调到最近的 snap 点，但如果目标位置没对齐，就可能跳到错误 slide。根本解法不是强行 scrollTo 像素值，而是让每个 slide 有唯一锚点，再用 element.scrollIntoView({ block: 'nearest', inline: 'start' });。
性能影响明显：直接操作 scrollLeft 在高 DPI 屏或缩放页面下易失步；而 scrollIntoView 会尊重当前 scroll-snap 配置，天然兼容。
立即学习“前端免费学习笔记（深入）”；
- 不要用
scrollTo(x, 0)计算像素偏移，改用slideEl.scrollIntoView() - 确保每个
.slide有固定宽度（如width: 100vw;），且无 margin 干扰布局流 - 如果轮播图嵌套在
transform: scale()容器里，snap 行为会异常，尽量避免
移动端 touch 滚动卡顿或 snap 失效
iOS Safari 和部分安卓 WebView 下，scroll-snap 在 touch 滚动中常出现“滑过不停”或“停在两帧之间”。这不是 bug，而是浏览器为防误触默认禁用了 snap 的即时响应。必须显式开启 touch-action: pan-x; 并关闭默认的 touch 拦截。
另一个隐藏坑是：如果轮播图外层套了 position: fixed; 或 will-change: transform;，某些旧版 WebKit 会绕过 snap 逻辑。建议只对滚动容器本身加优化提示，如 will-change: scroll-position;。
- 给滚动容器加
touch-action: pan-x;（iOS 必需），同时移除user-select: none;（它会干扰 touch 事件流） - 避免在滚动容器上使用
overscroll-behavior: contain;，它会抑制 snap 的惯性吸附 - 测试真机时务必关掉“辅助功能 > 减少动画”，否则 snap 动画会被强制降级为跳变
自动轮播 + scroll-snap 冲突导致无限滚动
用 setInterval 调 scrollTo() 或 scrollIntoView() 时，如果用户正在手动拖拽，JS 调用和用户手势会竞争 scroll 位置，造成“来回弹跳”甚至卡死。这不是 scroll-snap 的问题，而是滚动控制权没做隔离。
真正可靠的解法是监听 scrollend 事件（Chrome 112+、Safari 16.4+ 支持），只在用户停止滚动后才触发下一张。不支持 scrollend 的老环境，得用 setTimeout + scrollingElement.scrollTop 变化检测兜底。
- 永远不要在
scroll事件里直接调scrollIntoView，会引发重入 - 自动轮播间隔至少设为 3000ms，太短会打断用户操作意图
- 用户手动滚动后，应暂停自动轮播 5 秒，这个逻辑必须独立于 snap 实现，否则容易漏判
