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

Question

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

我目前正在使用Vue 2.0.8

Answer 1

2021 简单、易读且不会伤害您的大脑...使用 el.scrollIntoView()

这是一个小提琴。

该解决方案不会伤害你的大脑不必考虑scrollTop或者scrollHeight，平滑滚动内置的，甚至在IE工作。

scrollIntoView()有一些选项，你可以通过它scrollIntoView({behavior: 'smooth'})来平滑滚动。

methods: {
  scrollToElement() {
    const el = this.$refs.scrollToMe;

    if (el) {
      // Use el.scrollIntoView() to instantly scroll to the element
      el.scrollIntoView({behavior: 'smooth'});
    }
  }
}

然后如果你想在页面加载时滚动到这个元素，你可以像这样调用这个方法：

mounted() {
  this.scrollToElement();
}

否则，如果您想通过单击按钮或其他操作滚动到它，您可以使用相同的方式调用它：

<button @click="scrollToElement">scroll to me</button>

滚动一直工作到 IE 8。平滑滚动效果在 IE 或 Safari 中无法开箱即用。如果需要，这里有一个可用的polyfill，如评论中提到的 @mostafaznv。

Answer 2

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

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

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

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

希望这对你有所帮助.

Answer 3

我尝试了接受的解决方案,它对我不起作用.我使用浏览器调试器并找出应该使用的实际高度,clientHeight 但是你必须将它放入updated()钩子中以使整个解决方案起作用.

data(){
return {
  conversation: [
    {
    }
  ]
 },
mounted(){
 EventBus.$on('msg-ctr--push-msg-in-conversation', textMsg => {
  this.conversation.push(textMsg)
  // Didn't work doing scroll here
 })
},
updated(){              <=== PUT IT HERE !!
  var elem = this.$el
  elem.scrollTop = elem.clientHeight;
},

Answer 4

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);
}

Answer 5

这是一个使用#ref滚动到div底部的简单示例。

/*
Defined somewhere:
  var vueContent = new Vue({
      el: '#vue-content',
      ...
 */

var messageDisplay = vueContent.$refs.messageDisplay;
messageDisplay.scrollTop = messageDisplay.scrollHeight;

<div id='vue-content'>
  <div ref='messageDisplay' id='messages'>
    <div v-for="message in messages">
      {{ message }}
    </div>
  </div>
</div>

请注意，通过放入ref='messageDisplay'HTML，您可以通过vueContent.$refs.messageDisplay

Answer 6

如果需要支持 IE11 和（旧）Edge，可以使用：

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

如果您不需要支持 IE11，以下将起作用（更清晰的代码）：

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

Answer 7

尝试vue-chat-scroll：

通过 npm 安装：npm install --save vue-chat-scroll

进口：

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

在app.js之后window.Vue = require('vue').default;

然后将其与以下命令一起使用：

<ul class="messages" v-chat-scroll>
  // your message/chat code...
</ul>