Vue3 div自动滚动

Roottt_

已于 2024-05-08 14:54:52 修改

阅读量449

点赞数 3

文章标签： javascript 前端 vue.js

于 2024-03-12 15:47:07 首次发布

本文链接：https://blog.csdn.net/weixin_43896125/article/details/136654248

版权

本文介绍了如何在Vue3中使用ref和ref对象实现div元素的自动滚动功能，以及两种不同的写法，一种是使用setInterval控制滚动，另一种是利用mouseover/mouseout事件控制滚动速度。

摘要由CSDN通过智能技术生成

vue3 div自动滚动

<div ref="divRef"></div>

const timer = ref()
const divRef = ref()
// 自动滚动
function autoScroll() {
  if (timer.value) window.clearInterval(timer.value)
  // 设置定时器进行滚动
  timer.value = setInterval(() => {
    const container = unref(divRef)
    container.scrollTop += 1
    if (container.scrollHeight - container.clientHeight - container.scrollTop <= 10) {
      container.scrollTop = 0
    }
  }, 100) // 滚动频率，单位为毫秒
}

写法2

const autoScroll = () => {
	const table = unref(divRef)
	const divData = table.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
	let tableScroll = true
	divData.addEventListener('mouseover', () => {
	  tableScroll = false
	})
	divData.addEventListener('mouseout', () => {
	  tableScroll = true
	})
	divData.scrollTop = top
	if (timer.value) clearInterval(timer.value)
	timer.value = setInterval(() => {
	  if (tableScroll) {
	    divData.scrollTop += 1
	    if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
	      divData.scrollTop = 0
	    }
	  }
	}, 100) // 滚动速度
}