vue3之列表滚动

记录一次列表滚动效果

对于列表滚动,需要获取某一节点的 scrollTop,初始化距离为0,通过不断增加scrollTop的大小使列表滚动.代码如下:

<script>

import { ref } from "vue";

const scrollRef = ref();  //获取列表节点

function startScroll(){

//设置定时器,每50毫秒列表向下滑动1单位
 setInterval(() => {
//判断是否到底,如果到底,恢复到顶
  if (
    scrollRef.value.scrollTop >=
    scrollRef.value.scrollHeight - scrollRef.value.clientHeight
  ) {
    scrollRef.value.scrollTop = 0;
  } else {
    scrollRef.value.scrollTop += 1;
  }
}, 50);}
</script>

<template>
<div class="list" ref="scrollRef">
<div  v-for="item in 10" :key=item >{{item}}</div>
</div>
</template>