垂直滚动轮播图无法仅靠纯CSS实现完整交互，必须用JavaScript或Swiper.js；CSS仅适合固定内容的单向循环，需注意overflow隐藏、高度一致和关键帧闭环；JS需处理索引、无缝循环和事件响应；Swiper因内置状态机和多端适配最稳妥。
垂直滚动轮播图在 HTML 中无法仅靠纯 CSS 实现完整交互逻辑（比如自动播放、暂停、手动切换），必须配合 JavaScript 控制元素位移和状态。CSS 的 animation 或 scroll-snap 可以模拟简单循环，但缺乏事件响应和容错能力。
用 CSS @keyframes + transform 做基础垂直动画
适合内容固定、无需用户干预的单向循环场景。核心是让容器高度固定，子项纵向排列，通过 transform: translateY() 移动整体位置。
常见错误：未设置 overflow: hidden 导致滚动条出现；keyframes 位移值计算错误导致跳帧或停顿。
- 每个子项高度需一致（如
height: 200px），总容器设为该高度 - 动画时长按项数 × 单项停留时间设定，例如 4 项 × 3s = 12s
- 关键帧中
translateY要覆盖全部项的累计高度，最后一帧回到起点（用百分比或具体 px 值均可，但必须闭环）
@keyframes slideUp {
0% { transform: translateY(0); }
25% { transform: translateY(-200px); }
50% { transform: translateY(-400px); }
75% { transform: translateY(-600px); }
100% { transform: translateY(0); }
}
.carousel {
height: 200px;
overflow: hidden;
animation: slideUp 12s ease-in-out infinite;
}用 JavaScript 实现可交互垂直轮播（推荐）
真正可用的垂直轮播必须支持：点击切换、鼠标悬停暂停、键盘上下键控制、无缝循环。核心是动态修改 scrollTop 或 transform，并维护当前索引。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：scrollTop 在 flex 容器中行为不稳定；直接改 top 会触发重排；未克隆首尾项导致循环断裂。
- 用
position: relative包裹子项，用transform: translateY()驱动，性能更好 - 索引从 0 开始，每次切换后更新
currentIndex，并计算目标translateY = -currentIndex * itemHeight - 实现无缝循环：把第一项 clone 后 append 到末尾，动画到底后瞬间重置位置并跳过过渡
- 绑定
mouseenter/mouseleave控制clearInterval和重启
用 Swiper.js 快速集成垂直轮播
Swiper 是目前最稳定的方案，原生支持 direction: 'vertical'，且处理了触摸滑动、惯性、多端适配等细节。
注意点：slidesPerView 默认为 1，若想显示部分下一项，设为 'auto' 并加 spaceBetween；垂直模式下 mousewheel 默认关闭，需显式启用。
- 引入 Swiper CSS 和 JS 后，初始化时必须指定
direction: 'vertical' - 启用自动播放需配置
autoplay: { delay: 3000 }，暂停用swiper.autoplay.stop() - 自定义导航按钮时，调用
swiper.slideNext()或swiper.slidePrev()，不是操作 DOM
垂直轮播真正的复杂点不在滚动本身，而在「边界处理」——比如最后一项向上滑出后如何自然衔接第一项，以及用户快速连点时的状态同步。这些在手写 JS 中极易出 bug，Swiper 内部用 translate3d + requestAnimationFrame + 状态机做了封装，直接复用更稳妥。
