vue 始终在元素底部_使用Vue.js滚动到div的底部

I have a Vue component with several elements in it. I want to automatically scroll to the bottom of that element when a method in the component is called (basically, do the same as in Scroll to bottom of div?). However, I haven't found the way to get the element within my component and modify scrolTop

I'm currently using Vue 2.0.8

解决方案

As I understood, the desired effect you want is to scroll to the end of a list (or scrollable div) when something happens (e.g.: a item is added to the list). If so, you can scroll to the end of a container element (or even the page it self) using only pure Javascript and the VueJS selectors.

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

container.scrollTop = container.scrollHeight;

I've provided a working example in this fiddle: https://jsfiddle.net/my54bhwn

Every time a item is added to the list, the list is scrolled to the end to show the new item.

Hope this help you.