2014-07-16 31 views
6

Wykonałem system czatu, ale miałem problem z przewijaniem div dla wiadomości, które pasek przewijania musi być domyślnie na dole.Automatyczne przewijanie do dołu DIV

DIV

<div class="chat-body chat-scroll" id="chat-scroll"></div> 

STYLE

.chat-scroll{position: absolute; top:0px; bottom: 0px; overflow-y: auto;} 

używam JQuery do przedłożenia wiadomość z formularza wejściowego aby odświeżyć zawartość # chat-scroll i automatyczne przewijanie jest W porządku do przesłania, ale przy pierwszym załadowaniu strony, przewijanie pozostaje tylko w środku div # chat-scroll. W przeciwieństwie do tego, gdy wyślę wiadomość, przejdzie ona na dół, gdy wyślę wiadomość.

JQuery do przewijania

$('#chat-scroll').animate({ 
scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000);     
+0

można udostępnić demo użyciu skrzypce lub codepen . – Tushar

Odpowiedz

12

Kiedy obciążenie okno przewijać czat div na dole przy użyciu document.ready

DEMO

$(document).ready(function(){ 
    $('#chat-scroll').animate({ 
    scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000); 
}); 
0
var objDiv = document.getElementById("your_div"); 
objDiv.scrollTop = objDiv.scrollHeight; 
+5

Dziękujemy za ten fragment kodu, który może zapewnić natychmiastową pomoc. Właściwe wyjaśnienie [znacznie się poprawi] (// meta.stackexchange.com/q/114762) jego wartość edukacyjna poprzez pokazanie * dlaczego * jest to dobre rozwiązanie problemu i sprawiłoby, że byłoby ono bardziej użyteczne dla przyszłych czytelników z podobnymi, ale nie identyczne, pytania. Proszę [edytuj] swoją odpowiedź, aby dodać wyjaśnienie i podać, jakie ograniczenia i założenia mają zastosowanie. –

Powiązane problemy