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

问题描述

我有一个包含多个元素的 Vue 组件.我想在调用组件中的方法时自动滚动到该元素的底部(基本上，与 滚动到 div 底部?).但是，我还没有找到在我的组件中获取元素并修改 scrolTop

的方法

我目前使用的是 Vue 2.0.8

解决方案

据我所知，您想要的效果是在发生某些事情时滚动到列表(或可滚动 div)的末尾(例如:添加了一个项目到列表).如果是这样，您可以仅使用纯 Javascript 和 VueJS 选择器滚动到容器元素的末尾(甚至它本身的页面).

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

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

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

希望对你有帮助.

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.

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