如何在 Vue JS 中创建自动滚动

Question

我想使用 Vue JS 创建页面的自动滚动我查看了一些选项，但它们没有帮助我这是我的代码

<template>
  <div class="wrapper">
    <div class="main"></div>
    <div class="main"></div>
    <div class="main"></div>
    <div class="main"></div>
  </div>
</template>

<style scoped>
.wrapper {
  width: min-content;
  margin: auto;
  height: 400px;
  overflow: scroll;
}
.main {
  width: 250px;
  height: 200px;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}
</style>

这是给定的code in codesandbox

Answer 1

创建一个以所需频率执行的间隔，并根据一些数学计算从顶部滚动。

const wrapper = document.querySelector('.wrapper')

setInterval( () => {
  wrapper.scrollTop = wrapper.scrollTop + 20
}, 1000)