JavaScript实现页面无缝滚动效果_javascript技巧_
本文实例为大家分享了JavaScript实现页面无缝滚动效果的具体代码，供大家参考，具体内容如下
目前我只使用两种方式，如果还有其他方式，希望推荐一下。
1、js+transform
使用定时器动态增加大小，再把值赋给 transform，实现位置偏移，来实现无缝滚动。
html
一定要循环两遍数据，这样的话，会出现两个一样的数据，在一个数据消失后，不会使页面空白，而这时transform归0，有从头开始，因为两个数据相同，归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 --save
2、引入组件
在某些时候实际页面渲染后会出现点击事件失效的情况。这个问题是因为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); }, } }, };```