求助：无缝循环垂直滑块卡顿问题排查（附实现代码）

原代码核心问题 #

1. 容器未设置overflow: hidden，无法裁剪超出区域的滑块项，轮播效果根本无法正常生效
2. 最后一项回到第一项时的“瞬间跳转+重启过渡”逻辑依赖定时器，易因DOM重绘时机、定时器误差出现卡顿/闪烁
3. 未采用“克隆首尾项”的经典无缝轮播方案，无法实现真正的视觉平滑过渡

修正后的完整代码 #

CSS

.carousel-container {
    position: relative;
    width: 275px;
    height: 275px;
    overflow: hidden; /* 新增：裁剪超出容器的内容 */
}

.carousel {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    transition: transform 1s ease; /* 加入ease曲线优化平滑度 */
    will-change: transform;
}

.carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 275px;
    height: 275px;
    border-radius: 15px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 15px;
}

HTML

<div class="carousel-container">
    <div class="carousel">
        <!-- 克隆最后一项到开头，实现从最后到第一的无缝过渡 -->
        <div class="carousel-item" style="background-color: #9c27b0;">Item 5</div>
        <div class="carousel-item" style="background-color: #f44336;">Item 1</div>
        <div class="carousel-item" style="background-color: #2196f3;">Item 2</div>
        <div class="carousel-item" style="background-color: #4caf50;">Item 3</div>
        <div class="carousel-item" style="background-color: #ff9800;">Item 4</div>
        <div class="carousel-item" style="background-color: #9c27b0;">Item 5</div>
        <!-- 克隆第一项到结尾，实现从第一到最后的无缝过渡（手动控制时有用） -->
        <div class="carousel-item" style="background-color: #f44336;">Item 1</div>
    </div>
</div>

JavaScript

const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.carousel-item');
const itemHeight = items[0].offsetHeight + 15; // 包含item的margin-bottom
const totalRealItems = items.length - 2; // 减去首尾克隆的两项
let currentIndex = 1; // 初始位置指向第一个真实项（跳过开头的克隆项）

// 初始化轮播位置
carousel.style.transform = `translateY(-${itemHeight * currentIndex}px)`;

function moveCarousel() {
    currentIndex++;
    carousel.style.transform = `translateY(-${itemHeight * currentIndex}px)`;
    // 监听过渡结束，只触发一次
    carousel.addEventListener('transitionend', handleTransitionEnd, { once: true });
}

function handleTransitionEnd() {
    // 滚动到最后一个克隆项（视觉上是Item 1），跳转到真实第一个项的位置
    if (currentIndex === items.length - 1) {
        currentIndex = 1;
        carousel.style.transition = 'none'; // 取消过渡，避免跳转动画
        carousel.style.transform = `translateY(-${itemHeight * currentIndex}px)`;
        void carousel.offsetWidth; // 强制触发DOM重绘，确保位置立即生效
        carousel.style.transition = 'transform 1s ease'; // 恢复过渡效果
    }
    // 手动回滚到开头克隆项时，跳转到真实最后一项的位置（自动轮播不会触发此分支）
    else if (currentIndex === 0) {
        currentIndex = totalRealItems;
        carousel.style.transition = 'none';
        carousel.style.transform = `translateY(-${itemHeight * currentIndex}px)`;
        void carousel.offsetWidth;
        carousel.style.transition = 'transform 1s ease';
    }
}

// 启动自动轮播
setInterval(moveCarousel, 3000);

关键修改说明 #

• 容器裁剪：添加overflow: hidden确保只有当前滑块项在容器内可见
• 克隆首尾项：让轮播列表在视觉上形成闭环，滚动到边界时用户看不到跳转痕迹
• 过渡结束触发跳转：用transitionend事件替代定时器，保证过渡完成后再执行位置调整，彻底解决卡顿
• 强制重绘：void carousel.offsetWidth强制浏览器立即应用位置修改，避免过渡异常

内容的提问来源于stack exchange，提问作者Billsner