Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.08.2018, 17:57
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Чат прокрутка вниз 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 - контейнер сообщений
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2018, 18:23
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

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

и оно всё сломалось
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2018, 18:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

у аякса есть колбек функции
Malleys,
Сломал все. проверить не могу
Ответить с цитированием
  #4 (permalink)  
Старый 08.08.2018, 18:29
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Да там пока нет никакой обработки... Я удалил записи из БД. Двойные кавычки сломали JSON
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2018, 18:35
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Но вот странно то что если открыть отладчик - всё корректно работает...
Ответить с цитированием
  #6 (permalink)  
Старый 08.08.2018, 19:00
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от smegol
Но вот странно то что если открыть отладчик - всё корректно работает...
из за кеширования, во вкладке network поставьте галочку disable cashe, и станет так же
Ответить с цитированием
  #7 (permalink)  
Старый 08.08.2018, 19:21
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Возможно есть еще варианты реализации кроме scrollTop?
Ответить с цитированием
  #8 (permalink)  
Старый 08.08.2018, 19:35
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Когда пришло сообщение, то сначала нужно загрузить картинки, и только после их загрузки отобразить сообщение в чате, и применить scrollTop
Ответить с цитированием
  #9 (permalink)  
Старый 08.08.2018, 19:53
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Сообщение от Malleys Посмотреть сообщение
Когда пришло сообщение, то сначала нужно загрузить картинки, и только после их загрузки отобразить сообщение в чате, и применить scrollTop
Я пробовал использовать load, но он тут не работает - данные приходят AJAX - ом когда страница уже загружена.

Еще я пытался найти слушатель который сработает после того как элемент будет отрисован (по аналогии с React) но не нашел такого...
Ответить с цитированием
  #10 (permalink)  
Старый 08.08.2018, 20:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

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

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());
});

Последний раз редактировалось Malleys, 08.08.2018 в 20:06.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавная прокрутка вниз до якоря при окрытии страницы Igorsrt jQuery 15 11.10.2017 10:19
Плавная прокрутка вверх и вниз по пикселю с помощью jquery zulyamodx jQuery 5 28.11.2016 12:42
Автоматическая прокрутка дива вниз progi2007 Общие вопросы Javascript 16 16.04.2014 22:15
Прокрутка вниз в tablefixedheader fortest jQuery 0 29.03.2012 10:56
прокрутка div на определенное количество пикселей вниз, вверх skalka jQuery 4 14.02.2011 00:47