Задать вопрос
@TechNOIR

JS. Как доскролить до конца странице?

Добрый день. Никак не могу победить авто скролл в чате =(
Когда блок сообщений заполняется то скролл не доезжает до самого конца. А надо чтобы до самого конца уходил.. Как-то возможно докручивать его?
Игры с css отступами тоже ни к чему хорошему не привели..
Есть идеи товарищи?
Пробовал разные варианты,сейчас остановился:
function send_message(conv,message){
    if (conv.length > 4) {
            conv = conv + "<br>";
    }
    $("#converse").html(conv +"<div class='message-box left-img'><div class='picture'><img src='/my2/a.png' title='user name'></div><div class='mes'><span class = 'current-msg'>" + "<span id='chat-bot'>Бот: </span><p>" + message + "</p></span></div></div>");
    $(".current-msg").hide();
    $(".current-msg").delay(500).fadeIn();
    $(".current-msg").removeClass("current-msg");
    var el='converse';
document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight
    }


document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight
  • Вопрос задан
  • 396 просмотров
Подписаться 1 Простой 5 комментариев
Решения вопроса 1
ms-dred
@ms-dred
Вечно что то не то и что то не так...
function send_message(conv,message){
    if (conv.length > 4) {
            conv = conv + "<br>";
    }
    $("#converse").html(conv +"<div class='message-box left-img' style='display:none'><div class='picture'><img src='/my2/a.png' title='user name'></div><div class='mes'><span class = 'current-msg'>" + "<span id='chat-bot'>Бот: </span><p>" + message + "</p></span></div></div>");
    $(".current-msg").delay(500).fadeIn('show', function() {
        // Анимация завершилась и можно делать все что душе угодно
        $(".current-msg").removeClass("current-msg");
        var e = document.getElementById('converse');
        e.scrollTop=e.scrollHeight
    })
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
infern01it
@infern01it
учусь быть крутым front-end разработчиком :)
для решение этой проблемы помогло редактирование css
.message-box {
    padding: 13px 20px 27px;
}
.message-box::after {
    content: '';
    display: table;
    clear: both;
}

js остался тем-же
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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