封装插件了
一步到位https://blog.csdn.net/chuenst/article/details/139095523
原生js实现如下图循环滚动效果
核心代码
<div class="scroll">
<div class="blist" id="scrollContainer">
<div class="bitem">
</div>
......
<div class="bitem">
</div>
</div>
</div>
<script>
setTimeout(() => {
let speed = 10; // 调整滚动速度,单位是毫秒
let scrollContainer = document.getElementById('scrollContainer');
let contentHeight = scrollContainer.offsetHeight;
let top = 0
scrollContainer.style.position = 'relative';
scrollContainer.style.top = top + 'px';
scrollContainer.append(scrollContainer.cloneNode(scrollContainer))
setInterval(() => {
if (top * -1 < contentHeight) top--
else top = 0
scrollContainer.style.top = top + 'px';;
}, speed);
}, 200)
</script>
20240507优化
//html
<div class="scroll">
<div class="scrollContainer" ref="scrollContainer">
<div class="l-item" v-for="(item, index) in leftList" :key="index">
...
</div>
</div>
</div>
//css
.scroll {
height: 800px;
overflow: hidden;
}
//js
//封装方法
function toScroll(e: any) {
let sc = e.el;
if (sc && typeof sc === "object" && sc !== null) {
let contentHeight = sc.offsetHeight;
if (contentHeight < sc.parentElement.offsetHeight) return
let distance = 0
if (e.direction == 'down') distance = -contentHeight
sc.append(sc.cloneNode(sc))
let timer = null
if (timer) clearInterval(timer)
timer = setInterval(() => {
if (e.direction == 'up') {
if (distance * -1 < contentHeight) distance--
else distance = 0
sc.style.transform = 'translate(0px, ' + distance + 'px)';;
} else if (e.direction == 'down') {
if (distance < 0) distance++
else distance = -contentHeight
sc.style.transform = 'translate(0px, ' + distance + 'px)';
}
}, e.step || 3);
}
}
//调用
toScroll({
el: scrollContainer.value,
step: 3,
direction: 'up'
})