scroll-snap-type必须设在可滚动容器上而非卡片本身；它仅对启用overflow-x:auto/scroll且内容溢出的父容器生效，写在.card等子元素上会被浏览器忽略。
scroll-snap-type 必须设在可滚动容器上，不是卡片本身
很多人把 scroll-snap-type 写在卡片元素（比如 .card）上，结果完全没反应。它只对启用 overflow-x: auto 或 overflow-x: scroll 的父容器生效，且该容器必须实际存在滚动空间。
常见错误写法：.card { scroll-snap-type: x mandatory; } —— 浏览器直接忽略；.card { scroll-snap-align: center; } —— 这行有效，但前提是父容器已正确设置 scroll-snap-type。
正确结构要点：
-
.carousel需设display: flex+overflow-x: auto+scroll-snap-type: x mandatory - 每个子项（如
.card）设flex-shrink: 0+width: 100vw+scroll-snap-align: center center - 避免用
margin或padding调整卡片间距——改用gap或外层 wrapper 包裹
移动端吸附失效的三大硬性条件
iOS Safari 和部分 Android 浏览器会因“橡皮筋回弹”导致吸附跳过或卡半屏，这不是 bug，而是默认行为干扰了 scroll-snap 的锚定时机。
必须同时满足以下三点才能稳定吸附：
-
-webkit-overflow-scrolling: touch（仅 iOS，不加则滚动卡顿、吸附失灵） -
overscroll-behavior-x: contain（阻止滚动穿透和边界回弹） -
viewportmeta 标签中禁用缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
漏掉任意一项，尤其在微信内置浏览器或 iOS 17+ 上，都可能出现“划一半停不住”或“松手后自动跳两页”的现象。
卡片宽度与视口计算不准会导致吸附漂移
scroll-snap-align: center center 的吸附基准是卡片自身的盒模型中心，一旦卡片宽度受 box-sizing、border、padding 或父容器 flex 压缩影响，吸附点就会偏移。
安全写法：
- 卡片统一设
box-sizing: border-box - 宽度用
width: 100vw（非100%），避免继承父级 padding 影响 - 若需留白，用
gap（Flex 容器）或外层padding，而非卡片自身margin - 高度建议设
min-height: 100dvh，避免 Safari 对100vh的地址栏高度误判
特别注意：Safari 在横屏切换时可能重新计算 100vw，若出现瞬时错位，可加 will-change: scroll-position 提前提示渲染引擎。
自动轮播不能靠 CSS animation，必须用 scrollBy + scrollend
scroll-snap 本身不驱动滚动，只负责“停准”。所谓“自动滑动”，必须由 JS 触发，但方式很关键：
- ✅ 正确：
element.scrollBy({ left: width, behavior: 'smooth' })，浏览器会尊重scroll-snap-type并吸附到下一帧 - ❌ 错误：
element.scrollLeft += width，绕过滚动引擎，scroll-snap完全不响应 - 监听
scrollend事件判断是否停稳，再启动下一轮——iOS Safari 中这是防止连划跳页的唯一可靠方式 - 自动间隔建议 ≥ 3s；手动快速滑动后，需 clearTimeout 原定时器，否则容易“卡半屏”
最易被忽略的是：scrollend 在旧版 Android WebView 中不支持，需降级为 setTimeout + getBoundingClientRect() 检测位置是否静止，但误差容忍度要放宽到 ±2px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
