Есть блок
<div class="oldComments mb-3" ref="oldComments">
<ul class="commentList">
<li v-for="(comment,i) in history" :key="i" class="comment">
<span class="date">Сообщение от: {{comment.date}}</span><br>
<span class="name">{{comment.name}}: </span>
<span>{{comment.text}}</span>
<hr>
</li>
</ul>
</div>
В хуке mounted идет загрузка комментариев
axios
.get(url)
.then(function (response) {
if (response.data.status){
that.history = response.data.result
that.scrollToEnd()
}
})
.catch(function (error) {
console.log(error);
})
После загрузке методом scrollToEnd() я хочу прокрутить блок вниз, сам метод
scrollToEnd: function() {
let messageDisplay = this.$refs.oldComments;
this.$refs.oldComments.scrollTop = messageDisplay.scrollHeight;
}
но блок не прокручивается. Когда я добавляю новой значение к уже имеющимся, то блок скроллится, но не к последнему значению, а к предпоследнему. в чем может быть проблема?