自動滾動div問題

Question

我正在嘗試將div滾動添加到內容中。 我正在使用Vuejs列表，該列表會隨着源數組（vuejs的數據數組）的更改而更新項目。

<message v-for="message in messages"></message>

這是我的自動滾動偽代碼：

let scroll = false;

messagesContainer.addMessageChild(new messageElement(...)); // addMessageChild appends item to vuejs's data, it may be async when it actually adds the element to the DOM which may cause the problem

if (messagesContainer.scrollTop = maxScrollOfMessagesContainer)
    scroll = true;
messagesContainer.scrollTop = maxScrollOfMessagesContainer;

但是，消息容器元素不會滾動。 我擔心Vuejs可能會異步地從源（數據）中更新（插入）元素，這種方式可能會跳過if (messagesContainer.scrollTop = maxScrollOfMessagesContainer)檢查（在檢查之后添加元素（消息））。

我應該怎么做才能防止這種情況？

Answer 1

滾動上一條消息的方法怎么樣？

模板：

<message v-for="message in messages" v-class="last-message : $index === (items.length-1)">
</message >

方法：

// smooth scroll on .last-message
scrollToLastMessage: function () {
  document.querySelector('.last-message').scrollIntoView({ 
    behavior: 'smooth' 
  })
}

// scroll when messages change
watch: {
  messages: function () {
    this.scrollToLastMessage()
  }
}

// scroll when page ready
ready() {
  this.scrollToLastMessage()
}