@PetrTar

Как автоматически прокрутить блок вниз?

Есть блок
<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;
        }

но блок не прокручивается. Когда я добавляю новой значение к уже имеющимся, то блок скроллится, но не к последнему значению, а к предпоследнему. в чем может быть проблема?
  • Вопрос задан
  • 852 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
that.history = response.data.result
that.scrollToEnd()

Нет, так это работать не будет - в момент вызова scrollToEnd прокручивать нечего, DOM ещё не обновился. Оберните вызов scrollToEnd в nextTick.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы