Question

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

我目前拥有的方法：

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

当我单击以打开新用户时，将调用此方法。（每个用户都有消息，消息以ul形式显示，并带有li个项目）。

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

Answer 1

如果您在分配了某些scrollToEnd属性后调用messages，则由于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>

带有点击的滚动滚动到<li>（javascript）

1 个答案: