居中滚动

<!-- 竖向滚动 -->
<div style="height: 30px; line-height: 30px; overflow: hidden; background: #f8f9fa; padding: 0 10px; border-radius: 4px;">
    <div class="vertical-scroll" id="vScroll">
        <div style="text-align:center;">谢谢~【岗哥】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【康哥】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【恒哥】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【春晓】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【宋】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【时文光】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【胡艳秋】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【沉静如水】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【中药】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【钟瑞武】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【刘进】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【徐祥海】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【小邓】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【杨盈】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【任建峡】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【顺】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【章国栋】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【浪淘沙】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【二月河】的赞赏，❤️感恩厚爱支持！</div>
        <div style="text-align:center;">谢谢~【陈显平】的赞赏，❤️感恩厚爱支持！</div>
    </div>
</div>

<script>
const vScroll = document.getElementById('vScroll');
let itemList = Array.from(vScroll.children);

// 随机打乱数组函数
function shuffleArr(arr) {
    let newArr = [...arr];
    for (let i = newArr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
    }
    return newArr;
}

// 初始化随机排序
let randomItems = shuffleArr(itemList);
// 清空原有内容，插入随机后的条目 + 复制一遍实现无缝滚动
vScroll.innerHTML = '';
randomItems.forEach(el => vScroll.appendChild(el.cloneNode(true)));
randomItems.forEach(el => vScroll.appendChild(el.cloneNode(true)));

let index = 0;
const singleHeight = 30;
const realLen = randomItems.length;

setInterval(() => {
    index++;
    vScroll.style.transition = 'transform 0.5s ease';
    vScroll.style.transform = `translateY(-${index * singleHeight}px)`;

    // 滚动完一轮，瞬间复位无动画
    if (index >= realLen) {
        setTimeout(() => {
            index = 0;
            vScroll.style.transition = 'none';
            vScroll.style.transform = `translateY(0)`;
            // 每次循环结束重新随机打乱顺序
            randomItems = shuffleArr(itemList);
            vScroll.innerHTML = '';
            randomItems.forEach(el => vScroll.appendChild(el.cloneNode(true)));
            randomItems.forEach(el => vScroll.appendChild(el.cloneNode(true)));
        }, 500);
    }
}, 3000);
</script>