HTML怎么做垂直轮播_HTML垂直方向轮播滚动效果进阶

垂直轮播需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% 的坑，不是因为它封装得好，而是它把上面这些细节全踩过一遍了。