本文介绍两种JavaScript实现页面无缝滚动的方法。第一种利用定时器结合CSS transform属性，通过复制数据并重置位置实现视觉无缝；第二种推荐Vue-seamless-scroll插件，但需注意其重复渲染DOM导致的点击事件失效问题，建议使用事件委托机制解决。
本文分享JavaScript实现页面无缝滚动效果的具体代码，供读者参考。
目前主要介绍两种实现方式，若存在其他有效方案，欢迎补充推荐。
1、js+transform
该方法通过定时器动态累加数值，并将结果赋值给transform属性以产生位置偏移，从而实现无缝滚动效果。
html
关键在于数据需循环渲染两遍。这样当第一组数据完全移出视口时，第二组相同数据随即出现，避免了页面空白。此时将transform重置为0，由于两组数据视觉一致，重置后看起来如同无缝衔接滚动。
<div style="height: 100%" @mouseenter="moveStar()" @mouseleave="moveLeave()">
<table id="rollOne" border="1" :style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}">
<tr v-for="item in tableData" :key="item.index">
<td width="25%">{{item.fxsj}}</td>
<td width="15%">{{item.gjbh}}</td>
<td width="35%">{{item.pzgs}}个</td>
<td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>详情</span></td>
</tr>
</table>
<table border="1" :style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}">
<tr v-for="item in tableData" :key="item.index">
<td width="25%">{{item.fxsj}}</td>
<td width="15%">{{item.gjbh}}</td>
<td width="35%">{{item.pzgs}}个</td>
<td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>详情</span></td>
</tr>
</table>
</div>js
export default {
name: "rolling",
data() {
return {
flvPlayerTimer:0,
timer:null
}
},
props: {
tableData: {
type: Array
},
},
mounted(){
this.timer = setInterval(()=>{
this.flvPlayerTimer-=1
if(this.flvPlayerTimer== -($('#rollOne').height())){
this.flvPlayerTimer =0
}
},100)
// 别忘了定时器清除
this.$once('hook:beforeDestroy',()=>{
clearInterval(this.timer);
this.timer = null;
})
},
methods:{
// 鼠标触碰停止
moveStar(){
clearInterval(this.timer);
this.timer2 = null;
},
// 鼠标离开始
moveLeave(){
this.timer = setInterval(()=>{
this.flvPlayerTimer-=1
if(this.flvPlayerTimer== -($('#rollOne').height())){
this.flvPlayerTimer =0
}
},100)
},
}
}css
.fxlx{
height: 16vh;
width: 100%;
table,table tr td {
border:1px solid rgba(41,143,229,0.3);
}
table{
width: 90%;
margin: 0 auto;
th{
opacity: 0.7;
background: linear-gradient(rgba(53,123,203,0.7), rgba(9,57,113,0.7));
font-size: 9rem;
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
font-weight: 400;
color: #ffffff;
height: 28rem;
}
td{
opacity: 0.8;
font-size: 9rem;
height: 30rem;
font-family: PingFang SC Regular, PingFang SC Regular-Regular;
font-weight: 400;
color: #ffffff;
background:#001c38
}
}
}2、使用vue-seamless-scroll插件
1、安装vue-seamless-scroll
npm install vue-seamless-scroll --save2、引入组件
在实际页面渲染后，有时会出现点击事件失效的情况。这是因为vue-seamless-scroll通过重复渲染内部元素来实现滚动，而原生JS的onclick仅绑定在初始渲染的DOM元素上。这是原生JS开发中常见的问题，通常通过事件委托方式解决。即在父级section上绑定handleClick事件，捕获点击的具体DOM节点，并将所需数据通过data属性绑定到相应DOM元素上。
<div class="my-inbox" @click.stop="handleClick($event)">
<vue-seamless-scroll :data="sendVal.body" :class-option="defaultOption">
<!-- <div v-for="(item, index) in sendVal" :key="index" @click="jump(item)">-->
<!-- <div class="wfjl1" v-show="index % 2 == 0">{{ item }}</div>-->
<!-- <div class="wfjl2" v-show="index % 2 == 1">{{ item }}</div>-->
<!-- </div>-->
<table ref="movebox">
<tr v-for="(item, index) in sendVal.body" :key="index">
<td
:data-obj="JSON.stringify(item)"
:id="'xzq' + index"
width="15%"
>
{{ item.range }}
</td>
<td
:data-obj="JSON.stringify(item)"
:id="'wflx' + index"
width="20%"
>
{{ item.wflx }}
</td>
<td :data-obj="JSON.stringify(item)" :id="'sj' + index" width="25%">
{{ item.sbsj }}
</td>
<td :data-obj="JSON.stringify(item)" :id="'zt' + index" width="20%">
<img
style="width: 71rem; height: 34rem; margin: 5rem 0"
:src="item.image_result"
/>
</td>
</tr>
</table>
</vue-seamless-scroll>
</div>js
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "my-marquee-top",
props: {
sendVal: Object,
},
data() {
return {
isShow: true,
time: "",
url: "",
};
},
components: {
vueSeamlessScroll,
},
computed: {
defaultOption() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom/
};
},
},
methods: {
handleClick(item) {
let message = JSON.parse(item.target.dataset.obj);
this.$emit("jump", message);
},
}
},
};```以上为本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。