https://www.gztwkadokawa.com/assets/addons/ldcms/default/js/HwSeamlessScroll.js?v=1.0.11

1/**
2 * 无缝滚动组件
3 */
4class HwSeamlessScroll{
5    /**
6     * 
7     * @param {Element} element 
8     * @param {{speed:Number,delay:Number}} option 
9     */
10    constructor(element,option){
11        this.element = element;
12        this.ulElement = element.querySelector('ul');
13        this.movePos = 0;//translate 距离，单位px
14        this.elHeight = 300;//回滚高度，单位px
15        this.opt = {
16            speed:1,//滚动速度，单位px
17            delay:0,//延迟开始滚动，单位ms
18        }
19        this.opt = Object.assign(this.opt,option);
20        this.init();
21    }
22
23    init(){
24        this._waitForImages(this.element).then(async()=>{
25            this.elHeight = this.ulElement.clientHeight;
26            this.ulElement.innerHTML += this.ulElement.innerHTML;
27            await this._delay(this.opt.delay);//延迟开始
28            this._scorllUp(); //执行滚动
29
30            window.addEventListener('resize',this._debounce(()=>{
31                //窗口大小改变时，重新计算回滚高度
32                let h = this.ulElement.clientHeight;
33                this.elHeight = Math.floor(h/2);                
34            },1000));
35        });
36    }
37
38    _debounce(fn, wait) {
39        let timeout = null;
40        return function() {
41            if(timeout !== null) 
42                    clearTimeout(timeout);
43            timeout = setTimeout(fn, wait);
44        }
45    }
46
47    _delay(ms){
48        return new Promise(resolve=>setTimeout(resolve, ms));
49    }
50
51    _scorllUp(){
52        this.movePos -= this.opt.speed;
53        this.ulElement.style.transform = `translateY(${this.movePos}px)`;
54        if(Math.abs(this.movePos)>this.elHeight){
55            this.movePos = 0;
56        }else if(Math.abs(this.movePos) > 10000){
57            console.error('回滚距离判断失败');
58            return;
59        }
60        
61        requestAnimationFrame(this._scorllUp.bind(this));
62    }
63
64    /**
65     * 等待元素内图片加载完成
66     */
67    _waitForImages(element){
68        const images = element.querySelectorAll('img');
69        const promises = [];
70
71        images.forEach(image => {
72            promises.push(new Promise((resolve) => {
73            image.onload = () => resolve();
74            }));
75        });
76
77        return Promise.all(promises);
78    }
79}
80        
81/*
82使用方法：
83样式自行编写
84<style>
85.scroll-container{
86    width: 300px;
87    height: 200px;
88    border: 1px solid red;
89    padding: 4px;
90    overflow: hidden;
91
92    ul{
93        display: flex;
94        flex-direction: column;
95        img{
96            width: 100%;
97        }
98    }
99}
100</style>
101
102<div id="one" class="scroll-container">
103    <ul>
104        <li><img src="https://picsum.photos/300/100?random=1" alt=""></li>
105        <li><img src="https://picsum.photos/300/200?random=1" alt=""></li>
106        <li><img src="https://picsum.photos/300/300?random=1" alt="">a</li>
107    </ul>
108</div>
109<script>
110    let one = document.querySelector('#one');
111    new HwSeamlessScroll(one,{delay:1000*2})
112</script>
113*/