当前位置: 首页 > Web前端 > JavaScript

实现区域内数据一直滚动

时间:2023-03-27 15:42:51 JavaScript

html布局111111

111111
111111
代码部分:mounted(){this.startScroll()},methods:{startScroll(){//清除定时器clearTimeout(this.timer)//定时触发周期this.timer=setInterval(this.scroll,30)},scroll(){if(this.$refs.scrollContainer){constbox=this.$refs.scrollContainer//组件滚动box.scrollTop+=1//判断滚动条是否已经滚动到底部if(box.scrollTop==box.scrollHeight-box.clientHeight){//获取组件的第一个节点constfirstNode=box.childNodes[0]box.scrollTop=0//删除节点box.removeChild(firstNode)//将节点拼接到组件的最后一部分box.append(firstNode)}}}}鼠标移动到停止滚动的区域clearTimeout(this.timer)鼠标移动超出区域继续滚动this.startScroll()