@Analka

Почему не выполняется скролл к последнему добавленному элементу?

Почему scrollTop не видит элемент, который мы только что добавили в массив push? Метод срабатывает в Vue компоненте, когда пришло новое сообщение, то скролл опускается к предыдущему, то есть предпоследнему.

if (this.dialogSelect > 0){
    window.Echo.private('chat.' + this.dialogSelect)
        .listen('DialogMessage',({data,user_id}) => {
                this.messages.push({
                    avatar: this.userAuth.avatar,
                    fullname: this.userAuth.fullname,
                    user_id: this.userAuth.id,
                    replay: data
                });
            $('.chat--messages__wrapper').scrollTop($('.chat--messages__wrapper').prop('scrollHeight'));
        })
        .listenForWhisper('typing', (e) => {

        });
}


Вот так выводятся сообщения:

<ul class="chat--messages__wrapper"  v-on:scroll.passive="onScroll">
                                    <li class="chat--messages__item"  v-for="(message,index) in messages">
                                        <a :href="'/profile/'+message.slug" target="_blank" class="chat--user__image" v-bind:style='{ backgroundImage: `url("/storage/${message.avatar}")` }'></a>
                                        <div class="chat--user__data">
                                            <p class="last--massage" v-html="message.replay"></p>
                                        </div>
                                    </li>
                                </ul>
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Потому что его нет. Обновление DOM происходит не сразу же после изменения данных. Используйте nextTick.

И избавьтесь от jquery. Поставьте ref на список:

<ul class="chat--messages__wrapper" ref="messages">

А после добавления данных делайте так:

this.$nextTick(() => {
  const { messages } = this.$refs;
  messages.scrollTop = messages.scrollHeight;
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AndyPike
@AndyPike
Программист, full-stack developer.
Да, DOM не может меняться сразу, и реактивность тут не работает.
Функция должна завершиться и вернуться к основному потоку.
$nextTick или setTimeout(() => {}); , что одно и то же.
Потому что объекта для listenForWhisper сейчас нет.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы