Чат прокрутка вниз scrollTop
 

Здравствуйте!

Пишу чат, столкнулся с проблемой: при первом заходе на страницу в чат AJAX-ом выгружаются сообщения, после чего делается прокрутка вниз с помощью scrollTop - чтобы было видно последнее сообщение. Но прокрутка происходит не до конца - я полагаю это связано с тем что scrollTop срабатывает до загрузки всех изображений.

Но интересно то что при открытом отладчике прокрутка всегда выполняется как нужно.

Подскажите пожалуйста как можно такое решить?

Ссылка на чат

Код прокрутки

$('#chat__list-list').scrollTop($('#chat__list-out').height());

где:
#chat__list-list{
height: 400px
overflow-y: scroll
position: relative
}

#chat__list-out - контейнер сообщений

Я всего-лишь вставил туда в чат <iframe width="560" height="315" src="https://www.youtube.com/embed/KWqPL6bA0Bc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

и оно всё сломалось

у аякса есть колбек функции
Malleys,
Сломал все. проверить не могу

Да там пока нет никакой обработки... Я удалил записи из БД. Двойные кавычки сломали JSON

Но вот странно то что если открыть отладчик - всё корректно работает...

из за кеширования, во вкладке network поставьте галочку disable cashe, и станет так же

Возможно есть еще варианты реализации кроме scrollTop?

Когда пришло сообщение, то сначала нужно загрузить картинки, и только после их загрузки отобразить сообщение в чате, и применить scrollTop

Я пробовал использовать load, но он тут не работает - данные приходят AJAX - ом когда страница уже загружена.

Еще я пытался найти слушатель который сработает после того как элемент будет отрисован (по аналогии с React) но не нашел такого...

Я только, что пробовал... оно работает, поэтому я и написал так... Когда пришло сообщение, то сначала нужно загрузить картинки, и только после их загрузки отобразить сообщение в чате

function template(data) {
    if(data) {
        var imagePromises = (data.img || []).map(function(src) {
            var html = `
                <div class="chat__list-box-img chat__list-box-img_file">
                    <img class="chat__list-img" src="/img/${src}" role="presentation">
                </div>
            `;

            return new Promise(function(resolve) {
                var image = new Image();
                image.src = "/img/" + src;
                image.onload = image.onerror = function() {
                    resolve(html);
                };
            });
        });

        var time = moment.unix(data.timestamp).format('hh:mm');

        return Promise.all(imagePromises).then(function(html) {
            var img = html.join("");

            return `
                <div class="chat__list-item" data-id="${data.id}">
                    <div class="chat__list-col chat__list-col_1">
                        <div class="chat__list-box-img chat__list-box-img_user">
                            <img class="chat__list-img" src="/img/${data.imgAvatar}" alt="" role="presentation">
                        </div>
                    </div>
                    <div class="chat__list-col chat__list-col_2">
                        <div class="chat__list-row chat__list-row_1">
                            <div class="chat__list-name">${data.name}</div>
                            <div class="chat__list-time">${time}</div>
                        </div>
                        <div class="chat__list-row chat__list-row_2">
                            <div class="chat__list-text ${data.status == 'true' ? '' : 'chat__list-text_error'}">
                                ${data.status == 'true' ? data.text : 'Error'}
                            </div>
                            ${img}
                        </div>
                    </div>
                </div>
            `;
        });
    } else {
        return Promise.reject(new Error("No data"));
    }
}

вот так вызывал

template({
    "id":"250",
    "status":"true",
    "imgAvatar": "avatar_client.png",
    "name": "0",
    "timestamp": "1533568371",
    "text": "122 abc",
    "img": ["uploads/KzejvJellyfish.jpg"]
}).then(function(html) {
     document.getElementById('chat__list-out').insertAdjacentHTML("beforeEnd", html);
     $('#chat__list').scrollTop($('#chat__list-out').height());
});