关于前端:实现区域内数据一直循环滚动

html布局

<div class="box" ref="scrollContainer">  <div class="boxItem>111111</div>  <div class="boxItem>111111</div>  <div class="boxItem>111111</div></div>

代码局部：

mounted () {  this.startScroll()},methods: {  startScroll () {    // 革除定时器    clearTimeout(this.timer)    // 定时器触发周期    this.timer = setInterval(this.scroll, 30)  },  scroll () {    if (this.$refs.scrollContainer) {        const box = this.$refs.scrollContainer        // 组件进行滚动        box.scrollTop += 1        // 判断滚动条是否滚动到底部        if (box.scrollTop == box.scrollHeight - box.clientHeight) {        // 获取组件第一个节点        const firstNode = box.childNodes[0]            box.scrollTop = 0        // 删除节点        box.removeChild(firstNode)        // 将该节点拼接到组件最初        box.append(firstNode)    }  } }}

鼠标移入区域进行滚动
clearTimeout(this.timer)

鼠标移出区域持续滚动
this.startScroll()