一、场景
当内容超出元素固定高度时可以进行自动滚动。
二、实现
首先，给需要自动滚动的元素设定统一的name，方便后续滚动方法获取元素的信息，我这里举例统一用scrollBox：
<el-card class="text" name="scrollBox">
文本内容
</el-card>
其次，给需要自动滚动的元素设置样式，要满足高度固定，超出高度时出现滚动栏：
height: 600px;
overflow: auto;
最后，就是自动滚动方法：
scrollHeight为元素展开的全部高度，scrollTop为滚动滑块所在的位置高度，clientHeight为滚动滑块的高度。文章来源：https://www.toymoban.com/news/detail-513041.html
updateScrollTop() {
const scrollList = document.getElementsByName('scrollBox')
for (let i = 0; i < scrollList.length; i++) {
const x = scrollList[i]
this.scrollThen(x).then()
}
},
async scrollThen(x) {
do {
await new Promise(resolve => {
setTimeout(() => {
resolve()
}, 100)
})
if (parseFloat(x.clientHeight / x.scrollHeight) < 0.8) {
if (x.scrollHeight - x.scrollTop === x.clientHeight) {
x.scrollTop = 0
} else {
x.scrollTop++
}
}
} while (true)
}
然后在页面初始化时，调用滚动方法即可：文章来源地址https://www.toymoban.com/news/detail-513041.html
mounted() {
this.updateScrollTop()
}
到了这里，关于【VUE】实现自动滚动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
