VUE实现自动滚动简单示例
更新时间:2023年08月14日 09:26:52 作者:各行棋道丶
这篇文章主要给大家介绍了关于VUE实现自动滚动的相关资料,现在很多数据展示大屏都会有很多的自动滚动的列表,文中通过代码实例介绍的非常详细,需要的朋友可以参考下
一、场景
当内容超出元素固定高度时可以进行自动滚动。
二、实现
首先,给需要自动滚动的元素设定统一的name,方便后续滚动方法获取元素的信息,我这里举例统一用scrollBox:
<el-card class="text" name="scrollBox"> 文本内容 </el-card>
其次,给需要自动滚动的元素设置样式,要满足高度固定,超出高度时出现滚动栏:
height: 600px; overflow: auto;
最后,就是自动滚动方法:scrollHeight为元素展开的全部高度,scrollTop为滚动滑块所在的位置高度,clientHeight为滚动滑块的高度。
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)
}然后在页面初始化时,调用滚动方法即可:
mounted() {
this.updateScrollTop()
}附:vue进入页面自动滚动相应位置
mounted() {
this.$nextTick(() => {
setTimeout(() => {
window.scrollTo({ top: 657, behavior: "smooth" })
}, 200)
})
},
// top滚动位置总结
到此这篇关于VUE实现自动滚动的文章就介绍到这了,更多相关VUE自动滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue-router 中hash模式和history模式的区别
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07
浅谈vue的iview列表table render函数设置DOM属性值的方法
下面小编就为大家带来一篇浅谈vue的iview列表table render函数设置DOM属性值的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09


最新评论