Как сделать прокрутку div до дна автоматически

Question

Я создаю чат-интерфейс, который можно увидеть здесь (лучше всего смотреть в Chrome прямо сейчас):

http://qas.im/web/sms.php

Временное имя пользователя: пароль temp_guest: пароль

Моя проблема в том, что когда вы нажимаете один из чатов, он автоматически не прокручивается вниз, когда я использую этот код:

$(".messages").attr({ scrollTop: $(".messages").attr("scrollHeight") });

Что может быть не так? Div сообщений имеет css:

.messages {
    height:400px;
    overflow: auto;
}

Для тех, кому интересно: страница еще не проверена на HTML, но я скоро исправлю ее. Большая часть страницы генерируется автоматически, что затрудняет создание привлекательного кода; P

Answer 1

Я обнаружил две проблемы.

Во-первых, вы пытались установить все .message DIV на высоту первого DIV, поэтому, если первый DIV был скрыт, он никогда не будет работать.

Вторым было то, что функция attr jQuery предназначена только для атрибутов узла.

Этот метод работает лучше и корректно прокручивает все div:

$(".messages").each(function(idx, node) { node.scrollTop = node.scrollHeight; });

В качестве альтернативы, вы можете улучшитьпроизводительность с помощью этого селектора:

$(".messages:visible").each(function(idx, node) { node.scrollTop = node.scrollHeight; });

, который работает на видимых узлах сообщений.

Answer 2

Если вы используете jQuery 1.6 или новее, используйте prop вместо attr.

Рабочий пример: http://jsfiddle.net/FishBasketGordo/PNwj3/