CSS scroll-snap-type 是实现平滑竖向轮播最轻量方案，需父容器设 scroll-snap-type: y mandatory、overflow-y: scroll、height 及 scroll-behavior: smooth，子项设 scroll-snap-align: start 且高度一致。
用 CSS scroll-snap-type 实现平滑竖向轮播
竖向轮播本质是让容器在垂直方向上“一屏一停”，scroll-snap-type 是最轻量、无需 JS 就能达成原生滚动对齐的方式。它依赖父容器的 scroll-snap-type: y mandatory 和子项的 scroll-snap-align: start 配合，浏览器自动处理惯性、回弹和对齐逻辑。
常见错误是忘记设置父容器 overflow-y: scroll 或遗漏 scroll-behavior: smooth，导致滚动卡顿或无法对齐。
- 父容器必须有明确高度（如
height: 400px），且overflow-y: scroll - 每个轮播项需设
scroll-snap-align: start，并确保高度一致（如flex: 0 0 100%或固定height） - 加上
scroll-behavior: smooth让滚动过渡自然，否则会跳变 - 移动端需加
-webkit-overflow-scrolling: touch（仅 Safari 旧版本需要）
用 transform + setInterval 手动控制竖向切换
当需要自动播放、暂停、手动拖拽后重置定时器，或兼容不支持 scroll-snap 的老浏览器时，就得用 JS 控制 transform: translateY()。核心是维护当前索引 currentIndex，每次切换时更新 transform 值，并重置定时器。
容易踩的坑是未清除上一个 setInterval 导致多个定时器叠加，或未考虑用户正在拖拽时仍自动播放。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
getBoundingClientRect().top或记录currentIndex来判断可视区域，避免依赖滚动位置计算（易受缩放/滚动条宽度干扰） - 每次调用
setInterval前先clearInterval(this.timer) - 监听
touchstart/mousedown事件暂停自动播放，touchend/mouseup后延时恢复 - 动画用
transition: transform 0.4s ease-in-out，不要用 JS 逐帧requestAnimationFrame模拟（增加复杂度且无必要）
为什么不用 scrollTop 而用 transform？
scrollTop 触发重排（reflow），尤其在频繁滚动或内容高时性能明显下降；而 transform 由 GPU 加速，渲染更流畅，且不会影响文档流布局。更重要的是：scrollTop 在 iOS Safari 中存在异步延迟和抖动问题，用户快速滑动后松手，页面可能“滞后半屏”才对齐。
另一个现实问题是：若轮播项内含视频、iframe 或第三方组件，它们可能监听 scroll 事件并触发自身逻辑，用 transform 完全绕过滚动事件链，减少意外干扰。
-
transform方案中，容器本身不滚动，所以scroll事件根本不会触发 - 若必须保留滚动语义（如 SEO、无障碍阅读），可在
transform切换后同步更新aria-current属性，而非依赖scrollTop - 慎用
scrollTop = n * itemHeight强制跳转——Safari 下可能被截断或失焦
移动端触摸拖拽的边界处理很关键
纯 transform 方案下，用户手指拖动时需实时计算位移，但松手后要决定是“回弹到当前项”还是“滑到下一项”。这个逻辑写错会导致体验断裂：比如拖了 80% 高度却回弹回去，或拖了 20% 却直接跳走。
核心判断依据不是像素值，而是“拖动距离占单个轮播项高度的比例”。iOS 上还需注意 touchmove 默认行为未阻止时，页面可能整体滚动。
- 在
touchstart时记录startY = e.touches[0].clientY，touchmove时计算deltaY = currentY - startY - 松手时若
Math.abs(deltaY) > itemHeight * 0.3，则切换；否则回弹（用transition回到原位置） - 务必在
touchmove中调用e.preventDefault()，否则 Safari 会同时触发页面滚动 - 别忘了处理
touchcancel，防止中断后状态残留
实际滚动对齐的精度、拖拽响应是否跟手、自动播放与手动操作的优先级切换——这些细节才是竖向轮播是否“可用”的分水岭，而不是能不能动起来。
