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

Question

[TechNOIR]

Добрый день. Никак не могу победить авто скролл в чате =(
Когда блок сообщений заполняется то скролл не доезжает до самого конца. А надо чтобы до самого конца уходил.. Как-то возможно докручивать его?
Игры с 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

Comments

[Станислав]

может из за анимации проблема, попробуй обернуть скролл в setTimeout с задержкой в 500 и глянуть что будет.

[Максим]

по моему скрипт не учитывает маргин который под блоком сообщений

document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight+20

[TechNOIR]

Станислав, Спасибо! Проблема походу действительно в анимации.
Так?

setTimeout(document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight),500)

[Станислав]

TechNOIR, тип того =)

[Станислав]

А вобще по хорошему, на сколько я помню в jQuery .fadeIn() может принимать функцию, если это так тогда еще проще

$(".current-msg").delay(500).fadeIn(function() {
    // Анимация завершилась и можно делать все что душе угодно
    document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight
})

Добавил в ответ, если прокатит, отмечай

Answer 1

[Станислав]

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

Comments

[TechNOIR]

Спасибо!

Это прям в функцию вставляется?

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").delay(500).fadeIn(function() {
    var el='converse';
    document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight
    })
    $(".current-msg").removeClass("current-msg");
    }

Но анимация пропала

[Станислав]

Попробуй так

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").delay(500).fadeIn(function() {
        // Анимация завершилась и можно делать все что душе угодно
        $(".current-msg").removeClass("current-msg");
        var e = document.getElementById('converse');
        e.scrollTop=e.scrollHeight
    })
}

[TechNOIR]

Станислав, Я протупил, удалил строку $(".current-msg").hide(); случайно)

[TechNOIR]

Спасибо!!!

[Станислав]

TechNOIR, сорян с jQuery давно не работал, там функция вторым аргументом передается походу api.jquery.com/fadein

поправил свой ответ

Answer 2

[Максим]

для решение этой проблемы помогло редактирование css

.message-box {
    padding: 13px 20px 27px;
}
.message-box::after {
    content: '';
    display: table;
    clear: both;
}

js остался тем-же