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

Question

TechNOIR @TechNOIR

JavaScript

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

Вопрос задан более трёх лет назад
408 просмотров

5 комментариев

Подписаться 1 Простой 5 комментариев

Станислав @ms-dred

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

Написано более трёх лет назад
Максим @infern01it
по моему скрипт не учитывает маргин который под блоком сообщений

document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight+20
Написано более трёх лет назад
TechNOIR @TechNOIR Автор вопроса
Станислав, Спасибо! Проблема походу действительно в анимации.
Так?
setTimeout(document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight),500)
Написано более трёх лет назад
Станислав @ms-dred

TechNOIR, тип того =)

Написано более трёх лет назад
Станислав @ms-dred
А вобще по хорошему, на сколько я помню в jQuery .fadeIn() может принимать функцию, если это так тогда еще проще
$(".current-msg").delay(500).fadeIn(function() { // Анимация завершилась и можно делать все что душе угодно document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight })

Добавил в ответ, если прокатит, отмечай
Написано более трёх лет назад

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

document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight+20
Станислав, Спасибо! Проблема походу действительно в анимации.
Так?
setTimeout(document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight),500)
А вобще по хорошему, на сколько я помню в jQuery .fadeIn() может принимать функцию, если это так тогда еще проще
$(".current-msg").delay(500).fadeIn(function() { // Анимация завершилась и можно делать все что душе угодно document.getElementById(el).scrollTop=document.getElementById(el).scrollHeight })

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

Answer 1 · 2018-01-18 10:27:58

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

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

Войдите на сайт