vue 每次渲染完页面后div的滚动条保持在最底部

最新推荐文章于 2026-03-03 05:58:52 发布

原创最新推荐文章于 2026-03-03 05:58:52 发布 · 1.6w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

路漫漫其修远兮，吾将上下而求索～

收录于

vue-js

当前文章被收录于：

vue-js

13 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用Vue.js实现对话框自动滚动至底部的方法。通过在页面更新后使用$nextTick来获取对话框元素并设置其scrollTop属性为scrollHeight，确保了每次更新或首次加载时滚动条都在最底端。

//每次页面渲染完之后滚动条在最底部
updated() {
      this.$nextTick(() => {
      var div = document.getElementById('dialogue_box');
        div.scrollTop = div.scrollHeight;
      })
    }

//第一次页面渲染完之后滚动条在最底部
mounted() {
      this.$nextTick(() => {
      var div = document.getElementById('dialogue_box');
        div.scrollTop = div.scrollHeight;
      })
    }