Я пишу online чат. Как сделать так, чтобы при большом количестве сообщений скролбар сам опускался в самый низ. Т.е. для того чтобы просмотреть новые сообщения пользователю не нужно было пролистывать скролбар вниз.
Как автоматически опускать скролбар в самый низ элемента?
3 ответа
Посмотреть, как это работает - 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);
-
работает, но только когда первый приходит сообщение. при приходе второго сообщения уже неправильно переменную posTop считает 28 мая 2012 в 13:32
-
Ну, так перепенную posTop надо обновлять каждый раз, когда появляется сообщение. Если вы ajax используете, то в :success/ajaxSuccess(), например. Она ведь не должна быть статической.– Deonis28 мая 2012 в 13:37
-
Она и не является статической. она каждый раз обновляется, когда приходит сообщение. 28 мая 2012 в 13:44
-
А что если:
<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!
при приходе второго сообщения уже неправильно...
на предмет этого проверьте!
Используйте при загрузке чата и каждом обновлении следующий код:
el.scrollTop = Math.ceil(el.scrollHeight - el.clientHeight);
Где el - это страница или элемент, где требуется все промотать вниз, а округление нужно для точности позиционирования на экранах с высоким разрешением.