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

JavaScript

阿良小哥

2020-03-11

我有一个Vue组件,其中包含多个元素。我想在调用组件中的方法时自动滚动到该元素的底部(基本上,与滚动到div底部中的功能相同)。但是,我还没有找到在组件中获取元素并进行修改的方法scrolTop

我目前正在使用Vue 2.0.8

第837篇《使用Vue.js滚动到div的底部》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
卡卡西老丝 2020.03.11

如果需要支持IE11和Edge,则可以使用:

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

如果您不需要支持IE11,则可以执行以下操作(更清晰的代码):

scrollToBottom() {
    let element = document.getElementById("yourID");
    element.scrollIntoView({behavior: "smooth", block: "end"});
}
SamStafan 2020.03.11
  1. 使用DOM元素上的ref属性作为参考
<div class="content scrollable" ref="msgContainer">
    <!-- content -->
</div>
  1. 您需要设置一个手表
  data() {
    return {
      count: 5
    };
  },
  watch: {
    count: function() {
      this.$nextTick(function() {
        var container = this.$refs.msgContainer;
        container.scrollTop = container.scrollHeight + 120;
      });
    }
  }
  1. 确保使用正确的CSS
.scrollable {
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 20px);
}
Jim米亚西里 2020.03.11

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

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

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

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

希望对您有帮助。

猿EvaL 2020.03.11

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

最后,我使用了vue-scrollto,效果很好!

小小卡卡西小卤蛋 2020.03.11

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android