使用Vue.js滚动到div的底部

如果需要支持IE11和Edge，则可以使用：

scrollToBottom() {
    let element = document.getElementById("yourID");
    element.scrollIntoView(false);
}

如果您不需要支持IE11，则可以执行以下操作（更清晰的代码）：

scrollToBottom() {
    let element = document.getElementById("yourID");
    element.scrollIntoView({behavior: "smooth", block: "end"});
}

1. 使用DOM元素上的ref属性作为参考

<div class="content scrollable" ref="msgContainer">
    <!-- content -->
</div>

2. 您需要设置一个手表

  data() {
    return {
      count: 5
    };
  },
  watch: {
    count: function() {
      this.$nextTick(function() {
        var container = this.$refs.msgContainer;
        container.scrollTop = container.scrollHeight + 120;
      });
    }
  }

3. 确保使用正确的CSS

.scrollable {
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 20px);
}

据我了解，您想要的效果是在发生某些情况（例如：将一个项目添加到列表）时滚动到列表的末尾（或可滚动的div）。如果是这样，您可以仅使用纯Javascript和VueJS选择器滚动到容器元素的末尾（甚至是其自身的页面）。

var container = this.$el.querySelector("#container");
container.scrollTop = container.scrollHeight;

我在此提琴中提供了一个有效的示例：https : //jsfiddle.net/my54bhwn

每次将项目添加到列表时，列表都会滚动到末尾以显示新项目。

希望对您有帮助。

我的应用程序（具有复杂的嵌套组件结构）也有同样的需求，但不幸的是，我没有成功使其运行。

最后，我使用了vue-scrollto，效果很好！

在您发布的相关问题中，我们已经有一种方法可以用普通的javascript实现，因此我们只需要获取要滚动的dom节点的js引用即可。

该ref属性可用于声明对html元素的引用，以使其在vue的component方法中可用。

或者，如果method in the component是某个UI事件的处理程序，并且目标与您要在空间中滚动的div相关，则只需将事件对象与所需的参数一起传递，然后像那样滚动即可scroll(event.target.nextSibling)。