0

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

3 ответа 3

2

Посмотреть, как это работает - http://jsfiddle.net/Deonis/BSLXE/

HTML

<div id="chat">
    <p>Сообщение 1</p>
    <p>Сообщение 2</p>
    <p>Сообщение 3</p>
</div>

JS

var posTop = $('#chat p:last').position().top;
$('#chat').animate({
    scrollTop: posTop
}, 1000);

UPD

Обновленная ссылка - http://jsfiddle.net/Deonis/BSLXE/10/. Обновляйте переменную, после каждого скролла!

var lastEl = $('#chat p:last');
var posTop = lastEl.position().top;
function scrollBottom(i){
    $('#chat').append('<p>Новое сообщение ' + i +  '</p>');

    $('#chat').animate({
        scrollTop: posTop
    }, 500, function(){
        posTop += lastEl.height();
    });
}

var i = 0;
var timer = setInterval(function(){
    if(i > 8){
        clearInterval(timer);
    }
    i++;
    scrollBottom(i);
}, 1000);
4
  • работает, но только когда первый приходит сообщение. при приходе второго сообщения уже неправильно переменную posTop считает 28 мая 2012 в 13:32
  • Ну, так перепенную posTop надо обновлять каждый раз, когда появляется сообщение. Если вы ajax используете, то в :success/ajaxSuccess(), например. Она ведь не должна быть статической.
    – Deonis
    28 мая 2012 в 13:37
  • Она и не является статической. она каждый раз обновляется, когда приходит сообщение. 28 мая 2012 в 13:44
  • Дополнил в ответе
    – Deonis
    28 мая 2012 в 14:14
0

А что если:

<div style="width: 200px; height: 200px; overflow-y: auto;">
    <div id="txt">
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>
    <div id="end"></div>
</div>

и в адресной строке http://example.com/#end

без js!

при приходе второго сообщения уже неправильно...

на предмет этого проверьте!

0

Используйте при загрузке чата и каждом обновлении следующий код:

el.scrollTop = Math.ceil(el.scrollHeight - el.clientHeight);

Где el - это страница или элемент, где требуется все промотать вниз, а округление нужно для точности позиционирования на экранах с высоким разрешением.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.