vue3实现列表自动滚动

 <div class="rank">
        <div
          @mousemove="mousemove"
          ref="tableRef"
          style="height: 300px; overflow: hidden"
          v-if="mouseMend"
        >
          <li
            v-for="(item, index) of villageList"
            @click="focusVillage(item)"
            :class="{ active: activeVillage === item.id }"
            :key="item"
          >
            <span class="index">
              <img v-if="index === 0" src="../../../../assets/imageV2/奖牌-01.png" alt="" />
              <img v-if="index === 1" src="../../../../assets/imageV2/奖牌-02.png" alt="" />
              <img v-if="index === 2" src="../../../../assets/imageV2/奖牌-03.png" alt="" />
              <span class="round-number" v-if="index > 2">{{ index + 1 }}</span>
            </span>
            <span class="village-name">{{ item.name }}</span>
            <span class="event-count">{{ `${formatNumber(item.quota)}%` }}</span>
          </li>
        </div>
        <div @mouseleave="mouseleave" v-else>
          <li
            v-for="(item, index) of villageList"
            @click="focusVillage(item)"
            :class="{ active: activeVillage === item.id }"
            :key="item"
          >
            <span class="index">
              <img v-if="index === 0" src="../../../../assets/imageV2/奖牌-01.png" alt="" />
              <img v-if="index === 1" src="../../../../assets/imageV2/奖牌-02.png" alt="" />
              <img v-if="index === 2" src="../../../../assets/imageV2/奖牌-03.png" alt="" />
              <span class="round-number" v-if="index > 2">{{ index + 1 }}</span>
            </span>
            <span class="village-name">{{ item.name }}</span>
            <span class="event-count">{{ `${formatNumber(item.quota)}%` }}</span>
          </li>
        </div>
      </div>

//列表滚动ref绑定初始化
const timer = ref(null)
const tableRef = ref(null)
const mouseMend = ref(true) //判断鼠标移入移出排行榜表格
//等同于vue2中的destroyed
onUnmounted(() => {
  //清除定时器
  clearTimeout(timer.value)
})
const mousemove = () => {
  mouseMend.value = false
  //清除定时器,如果希望在setInterval之前终止其运行就可以使用clearTimeout()
  clearTimeout(timer.value)
}
const mouseleave = () => {
  mouseMend.value = true
  start()
}

//开启定时器方法
const start = () => {
  //定时器触发周期
  let speed = ref(40)
  //setInterval会返回一个id,clearTimeout拿到该id才可清除
  timer.value = setInterval(MarqueeTest, speed.value)
}

const MarqueeTest = () => {
  let scroll = tableRef.value
  //组件进行滚动
  scroll.scrollTop += 1
  // console.log(scroll.scrollTop,scroll.scrollHeight, scroll.clientHeight)
  //判断滚动条是否滚动到底部
  if (scroll.scrollTop == scroll.scrollHeight - scroll.clientHeight) {
    //获取组件第一个节点
    let firstNode = scroll.childNodes[0]
    // //删除节点
    scroll.removeChild(firstNode)
    //将该节点拼接到组件最后
    scroll.append(firstNode)
  }
}

//用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法

nextTick(() => {
  start()
})

ps

• scrollHeight:其中包括由于溢出而在屏幕上不可见的内容。（内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）
• scrollTop:有滚动条的时候，scrollTop 值是从元素顶部到其最顶部可见内容的距离的度量。当元素的内容没有垂直滚动条时，则scrollTop=0。
• clientHeight:样式的height+上下padding

• 判断内部元素滚动是否到底的表达式是：scrollHeight - scrollTop === clientHeight