自動スクロール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() 
}