vue滚动条滚动到顶部或者底部的方法
作者：双手依舞
这篇文章主要给大家介绍了关于vue滚动条滚动到顶部或者底部的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
1:在滚动条所属 div 上加上 ref=“mianscroll” (mianscroll名称随意起)
<div ref="mianscroll"> //中间内容 </div>
2:点击事件到顶部
topScrollClick() {
this.$nextTick(() => {
let scrollEl = this.$refs.mianscroll;
scrollEl.scrollTo({ top: 0, behavior: 'smooth' });
});
},3:点击事件到底部
bottomScrollClick() {
this.$nextTick(() => {
let scrollEl = this.$refs.mianscroll;
scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: 'smooth' });
});
}注意点：一定要是给滚动条所属 div 添加如上方法，不然无法生效，滚动的 div 的样式是 overflow:auto
附：vue滚动条自动滚动到底部
注意：在修改数据之后使用this.$nextTick，可以在回调中获取更新后的 DOM，如果在当前页面没有操作进行DOM更新，可以省略。
<template>
<div class="main" ref="main">
<div ref="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nesciunt ea consequatur quisquam nostrum alias atque aliquam inventore expedita explicabo aspernatur doloremque distinctio necessitatibus culpa ducimus eaque accusamus. Quis, similique!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab quasi maxime voluptate accusamus rem consectetur laborum porro mollitia dicta nisi quas facere commodi quaerat sunt ea, iste explicabo, maiores atque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti recusandae delectus iure fugiat, vitae veniam ipsam quas ullam explicabo, corrupti optio quidem hic quam nisi inventore aperiam laborum atque! Ducimus!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque non excepturi amet ex, tempora corporis repellat accusamus culpa aperiam perferendis reprehenderit illum consequuntur. Nemo nisi assumenda similique harum officia minus!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime eos eligendi, dolorum ullam reprehenderit ipsam et voluptas voluptatem facilis nobis animi at laudantium facere incidunt. Rerum sed nisi enim hic.
</div>
</div>
</template>
<script>
export default {
name: 'home',
mounted(){
this.$nextTick(() => {
this.$refs.main.scrollTop = this.$refs.content.scrollHeight;
})
}
}
</script>
<style>
.main{
width: 100%;
height: 200px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
overflow: auto;
}
</style>
</script>总结
到此这篇关于vue滚动条滚动到顶部或者底部的文章就介绍到这了,更多相关vue滚动条滚动到顶部或底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！