使用Vue.js滚动到div的底部 [英] Scroll to bottom of div with Vue.js

问题描述

我有一个Vue组件，里面有几个元素。我想在调用组件中的方法时自动滚动到该元素的底部（基本上，与滚动到div的底部？）。但是，我还没有找到在我的组件中获取元素的方法并修改 scrolTop

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

我是目前使用 Vue 2.0.8

推荐答案

据我所知，你想要的效果是滚动当事情发生时（例如：项目被添加到列表中）到列表（或可滚动div）的末尾。如果是这样，你可以只使用纯Javascript和VueJS选择器滚动到容器元素的末尾（甚至是它自己的页面）。

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;

我在这个小提琴中提供了一个工作示例： https://jsfiddle.net/my54bhwn

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.

希望这对您有帮助。

这篇关于使用Vue.js滚动到div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！