javascript - 单击时滚动到 <li> 并溢出(javascript)

Question

我想在单击时滚动到 li 元素。仅使用 JavaScript。问题是，我有:overflow:auto。因此，该列表位于具有滚动条的 ul 中。

我目前有的方法:

scrollToEnd() {
            var container = this.$el.querySelector("#test");
            container.scrollTop = container.scrollHeight;
}

当我点击打开新用户时会调用此方法。 (每个用户都有消息，消息显示在ul中，带有li项)。

我的li项目是在您点击用户时生成的。然而什么也没发生，有什么想法吗？

Answer 1

如果您在分配一些 messages 属性后调用 scrollToEnd ，它将不起作用，因为 DOM 尚未更新。您应该在 nextTick 回调中执行 DOM 操作，请参阅代码片段:

new Vue({
  el: "#app",
  data: {
  	messages: []
  },
  methods: {
      load() {
         // generate messages
         this.messages = Array.apply(null, Array(Math.floor(Math.random() * 100))).map((_, i) => i)
         // ul is updated after tick
         this.$nextTick(() => {
            var container = this.$el.querySelector("#test");
            container.scrollTop = container.scrollHeight;
         })
      }
  }
})

#test {
  background: grey
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <ul id="test" style="display: block; height: 100px; overflow: auto">
    <li v-for="msg in messages">{{ msg }}</li>
  </ul>
  <button @click="load" >Load</button>
</div>