【vue】滚动条自动滚动到底部_vue滚动条自动滚动到底部-优快云博客

这个Vue.js组件在挂载后自动将滚动条滚动到内容区域的底部，适用于需要自动展示全部内容的场景。主要代码在于`mounted`钩子中，利用`$nextTick`确保DOM更新后执行滚动操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：在修改数据之后使用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>