此处以html文件为例，参考了
javascript实现无缝上下滚动特效这个案例
对其进行了部分修改，让其更衔接更加自然，需要注意的是要给主容器添加一个定位属性，不然会跳动闪烁特别的明显。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
id="colee"
style="
position: relative;
overflow: hidden;
height: 100px;
width: 410px;
border: 1px solid red;
"
>
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed = 10;
var colee2 = document.getElementById("colee2");
var colee1 = document.getElementById("colee1");
var colee = document.getElementById("colee");
colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
function Marquee1() {
//当滚动至colee1与colee2交界时
if (colee2.offsetTop - colee.scrollTop <= 0) {
// colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
colee.scrollTop = 18; //colee跳到最顶端，使用上面的那个会卡掉第一个标签，p对应18基本做到无缝,这个的前提是容器需要有定位属性
} else {
colee.scrollTop++;
}
}
var MyMar1 = setInterval(Marquee1, speed); //设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover = function () {
clearInterval(MyMar1);
};
//鼠标移开时重设定时器
colee.onmouseout = function () {
MyMar1 = setInterval(Marquee1, speed);
};
</script>
</body>
</html>
然后我在vue3使用的时候，发现那个就算公式用回刚开始的就不会卡顿了，以及不用再使用定位属性，此处贴出组件代码，在父组件中对应插入
<template #content>内容</template>
即可
<template>
<div class="scroll-table" ref="colee">
<div ref="colee1">
<slot name="content"></slot>
</div>
<div ref="colee2">
<slot name="content"></slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref } from 'vue';
export default defineComponent({
setup() {
const colee2 = ref<any>();
const colee1 = ref<any>();
const colee = ref<any>();
onMounted(() => {
nextTick(() => {
const speed = 30;
// colee2.value.innerHTML = colee1.value.innerHTML; //克隆colee1为colee2
const Marquee1 = () => {
//当滚动至colee1与colee2交界时
if (colee2.value.offsetTop - colee.value.scrollTop <= 0) {
colee.value.scrollTop -= colee1.value.offsetHeight; //colee跳到最顶端，很神奇的是在vue3中使用这一套却可以做到无缝
// colee.value.scrollTop = 18; //colee跳到最顶端，使用上面的那个会卡掉第一个标签，p对应18基本做到无缝,这个的前提是容器需要有定位属性
} else {
colee.value.scrollTop++;
}
};
let MyMar1 = setInterval(Marquee1, speed); //设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.value.onmouseover = function () {
clearInterval(MyMar1);
};
//鼠标移开时重设定时器
colee.value.onmouseout = function () {
MyMar1 = setInterval(Marquee1, speed);
};
});
});
return {
colee,
colee1,
colee2,
};
},
});
</script>
<style lang="less" scoped>
.scroll-table {
overflow: hidden;
height: 100%;
width: 100%;
}
</style>
版权声明：本文为lee_amazing原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。