Question

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

的方法

我目前正在使用 Vue 2.0.8

Answer 1

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

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

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

每次将项目添加到列表中时，列表都会滚动到最后以显示新项目。

希望这对你有所帮助。

Answer 2

我尝试了接受的解决方案，它对我不起作用。我使用浏览器调试器，发现应该使用的实际高度是new InputStreamReader(new FileInputStream(input), <encoding>) 但是，您必须将其放入clientHeight挂钩，以便整个解决方案正常工作。

updated()

Answer 3

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

＆＃13;

/*
Defined somewhere:
  var vueContent = new Vue({
      el: '#vue-content',
      ...
 */

var messageDisplay = vueContent.$refs.messageDisplay;
messageDisplay.scrollTop = messageDisplay.scrollHeight;

＆＃13;

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

＆＃13;

请注意，通过在HTML中添加ref='messageDisplay'，您可以通过vueContent.$refs.messageDisplay

访问该元素

Answer 4

这种解决方案不会伤脑筋，不必考虑scrollTop或scrollHeight，不需要外部库，并且可以滚动到特定元素，因此非常灵活。

Here is a fiddle。

methods: {
  scrollToElement() {
    const el = this.$el.getElementsByClassName('scroll-to-me')[0];

    if (el) {
      el.scrollIntoView();
    }
  }
}

然后，如果您想在页面加载时滚动到该元素，则可以这样调用此方法：

mounted() {
 this.scrollToElement();
}

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

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

Answer 5

在你发布的相关问题中，我们已经有了一种方法来实现普通的javascript，所以我们只需要获取js对我们想要滚动的dom节点的引用。

The ref attribute可用于声明对html元素的引用，以使它们在vue的组件方法中可用。

或者，如果method in the component是某个UI事件的处理程序，并且目标与要在空间中滚动的div相关，那么您可以简单地pass in the event object以及您想要的参数，以及滚动就像scroll(event.target.nextSibling)。

Answer 6

这对我有用

this.$nextTick(() => {
   let scrollHeight = this.$refs.messages.scrollHeight
   window.scrollTo(0, scrollHeight)
})

Answer 7

I had the same need in my app (with complex nested components structure) and I unfortunately did not succeed to make it work.

Finally I used vue-scrollto that works fine !

Answer 8

使用DOM元素上的ref属性作为参考

<div class="content scrollable" ref="msgContainer">
    <!-- content -->
</div>

您需要设置手表

  data() {
    return {
      count: 5
    };
  },
  watch: {
    count: function() {
      this.$nextTick(function() {
        var container = this.$refs.msgContainer;
        container.scrollTop = container.scrollHeight + 120;
      });
    }
  }

确保您使用的是正确的CSS

.scrollable {
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 20px);
}

Answer 9

如果需要支持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 10

该解决方案对我不起作用，但是以下代码对我有效。我正在研究message-box类的动态项目。

scrollToEnd() {
            setTimeout(() => {
                this.$el
                    .getElementsByClassName("message-box")
                    [
                        this.$el.getElementsByClassName("message-box").length -
                            1
                    ].scrollIntoView();
            }, 50);
        }

请记住将方法放在mounted()中而不是created()中，并将类message-box添加到动态项中。

setTimeout()对于这项工作至关重要。您可以参考https://forum.vuejs.org/t/getelementsbyclassname-and-htmlcollection-within-a-watcher/26478以获得更多相关信息。

Answer 11

对于上面没有找到可行解决方案的人，我相信我有一个可行的解决方案。我的特定用例是，每当将新消息添加到数组时，我都想滚动到特定div的底部（在我的情况下为聊天框）。

const container = this.$el.querySelector('#messagesCardContent');
        this.$nextTick(() => {
          // DOM updated
          container.scrollTop = container.scrollHeight;
        });

我必须使用nextTick，因为在滚动之前我们需要等待dom从数据更改中进行更新！

我只是将上面的代码放入了message数组的观察器中，就像这样：

messages: {
      handler() {
        // this scrolls the messages to the bottom on loading data
        const container = this.$el.querySelector('#messagesCard');
        this.$nextTick(() => {
          // DOM updated
          container.scrollTop = container.scrollHeight;
        });
      },
      deep: true,
    },

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

11 个答案: