scroll-snap-type 必须设在带 overflow-y 的滚动容器上而非 body，且需设明确高度、-webkit-overflow-scrolling: touch、overscroll-behavior-y: contain 和 touch-action: pan-y；轮播项须为直接子元素并设 scroll-snap-align: start。
scroll-snap-type 必须设在滚动容器上，不是 body
很多人直接给 body 或 html 加 scroll-snap-type: y mandatory，结果完全没反应——因为移动端浏览器（尤其 iOS Safari）对根元素的滚动行为有严格限制，scroll-snap 在 body 上基本无效。必须用一个明确的、带 overflow-y: scroll（或 auto）的块级容器，比如 <div class="carousel">。
关键点：
-
scroll-snap-type要设在该容器上，且值推荐用y mandatory（垂直强制吸附），proximity在快速滑动时容易漏帧，不建议用于轮播 - 容器必须有明确高度（如
height: 100vh），不能靠内容撑开；否则无法触发滚动 - 需加
-webkit-overflow-scrolling: touch（iOS Safari 旧版必需，新版仍建议保留）
每个轮播项要设 scroll-snap-align，且不能依赖 flex 自动换行
轮播项（.slide）必须是滚动容器的**直接子元素**，且每个都要设 scroll-snap-align: start（垂直轮播用 start，水平用 center 也可，但 start 更稳定）。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 把
.slide套在flex容器里再加flex-wrap: wrap—— 这会导致它们不再是滚动流中的“可吸附节点”，scroll-snap-align失效 - 用
position: absolute布局轮播项 —— 同样脱离文档流，无法被吸附 - 忘记给
.slide设flex-shrink: 0（如果父容器是display: flex），否则可能被压缩导致高度不准
推荐结构：
<div class="carousel"> <div class="slide">第一页</div> <div class="slide">第二页</div> <div class="slide">第三页</div> </div>
iOS Safari 的 touch-action 和 overscroll-behavior 要关掉
默认情况下，iOS Safari 会在滚动到底部/顶部时触发“弹性回弹”，这会干扰 scroll-snap 的吸附精度，甚至让页面卡在两个位置之间。
解决方法：
- 给滚动容器加
overscroll-behavior-y: contain，阻止滚动穿透和回弹效果 - 加
touch-action: pan-y（不是pan-x或none），允许纵向滑动但禁用缩放/双指手势干扰 - 避免同时监听
touchstart/touchmove，否则可能触发preventDefault()，直接废掉原生滚动和 snap 行为
没有 JavaScript 就无法做“自动轮播”或“指示器同步”
scroll-snap 是纯 CSS 的滚动吸附机制，它不提供当前索引、不触发事件、也不支持 programmatically 滚动到指定项。也就是说：
- 想实现 3 秒切一页？必须用
scrollTo()+setInterval，不能只靠 CSS - 想高亮当前页的 dot 指示器？得监听
scroll事件，根据scrollTop计算当前项（注意：iOS Safari 的scroll事件有节流，要用requestAnimationFrame防抖） - 用户快速连滑两屏时，
scroll事件可能只触发一次，所以不能只依赖scroll判断“已完成切换”，更可靠的是监听scrollend（但目前仅 Chrome 112+ 和 Safari 16.4+ 支持，iOS 16.4+ 才可用）
真正落地时，CSS scroll-snap 只负责“滑动过程中的吸附”，其余交互逻辑绕不开 JS。
