jQuery: przewijanie zawartości DIVa na sam dół


Właśnie robiłem czat w PHP/Ajax, ze standardowymi funkcjami – pokoje, użytkownicy itp. Wszystko już działało ładnie, gdy nagle klient powiedział, że chciałby, aby nowe wiadomości pojawiały się na dole okna tak jak w Skype. Powiedziałem ok, nie ma problemu i zacząłem zmieniać okno wiadomości. Problem oczywiście się pojawił :) W momencie, gdy okazało się, że po pojawieniu się nowych wiadomości, okno z wiadomościami powinno przewinąć się na sam dół, pokazując najnowsze.

Walczyłem z tym chyba z pół godziny: .position(), .find(), .children() w różnych kombinacjach i ciągle ekran z wiadomościami pływał sobie w każdą stronę jak chciał ;) Oczywiście, jak zwykle rozwiązanie okazało się dużo prostsze niż te wszystkie kombinacje.

Okno z wiadomościami mieści się w DIVie z id czat. DIV ten ma overflow ustawione na auto.

<div id="czat">
...wiadomości
</div>

A skrypcik, który przewija okienko z efektem animacji wygląda tak:

$('#czat').animate({scrollTop: $('#czat').attr("scrollHeight")}, 1000);

W moim przypadku prędkość animacji ustawiłem na 1 sekundę.

Po raz kolejny sprawdziło się, że siła tkwi w prostocie. Tylko dlaczego czasem te najprostsze rozwiązania przychodzą tak późno? ;)

, , , ,

  1. No comments yet.
(will not be published)

  1. No trackbacks yet.