垂直轮播需JS驱动+克隆项兜底，核心解决循环断裂、悬停失灵、移动端错位；@keyframes须严格闭环计算，容器需overflow:hidden，子项高度须一致且显式声明。
垂直轮播不是加个 transform: translateY() 就能跑通的，核心卡点在「循环断裂」「鼠标悬停失灵」「移动端滑动错位」这三处。纯 CSS 方案只适合静态展示，真要上线用，必须 JS 驱动 + 克隆项兜底。
为什么 @keyframes 垂直轮播会跳帧或停顿
关键帧里 translateY 的数值必须严格闭环：比如每项高 200px、共 4 项，那动画终点就得回到 translateY(0)，中间帧不能凑整数（如写成 -199px），否则浏览器渲染时会插值出错。更隐蔽的问题是容器没设 overflow: hidden，导致滚动条意外出现，遮挡内容或触发重排。
- 子项高度必须一致，且显式声明（
height: 200px），不能靠内容撑开 - 动画总时长 = 项数 × 单项停留时间，例如 4 项 × 3s = 12s，不能随意缩成 8s
-
@keyframes中必须用具体像素值或百分比，但百分比需确保父容器高度固定，否则计算失效
scrollTop 在垂直轮播里为什么不可靠
直接改 scrollTop 看似简单，但在 display: flex; flex-direction: column 容器中，Chrome 和 Safari 表现不一致——有时滚动不到目标位置，有时触底后回弹。根本原因是 flex 容器对 scrollTop 的映射逻辑和普通块级元素不同，且无法触发硬件加速。
- 改用
transform: translateY()驱动，性能更好，也规避了 flex 的 scrollTop bug - 索引维护必须同步：每次切换后立刻更新
currentIndex，再算targetY = -currentIndex * itemHeight - 不要用
top属性，它强制触发 layout，动画一卡一卡
无缝循环必须克隆首尾项，但克隆后怎么隐藏多余部分
克隆第一项追加到末尾，是为了动画滑到底部时能“瞬移”回起点而不露白。但克隆项如果完全显示，会多出一屏内容。解决办法是把克隆项的 height 设为 0 或用 visibility: hidden，同时保证其真实 DOM 高度参与布局计算——最稳的方式是用 margin-top: -100% 把它压进视口外，而不是删掉或 display:none。
- 克隆操作必须在图片加载完成后再执行，否则
itemHeight获取不准 - 瞬移重置时机要卡在动画最后一帧结束前，用
animationend事件监听，别用定时器硬等 - 移动端 touchmove 时要禁用动画，否则手指拖拽和自动滚动打架
真正难的不是让内容动起来，而是动得准、停得稳、切得顺。尤其是当轮播里混着图片、iframe 或第三方组件时，克隆项的生命周期、事件绑定、资源加载顺序，都得一层层对齐。Swiper.js 的 direction: 'vertical' 能省掉 80% 的坑，不是因为它封装得好，而是它把上面这些细节全踩过一遍了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
