2014-10-17 4 views
0

У меня есть следующий код, это чат-дисплей, который я получил с помощью Firebase API. Проблема в том, что когда страница загружается, я хочу, чтобы она имела прямую полосу прокрутки, расположенную внизу. На данный момент он медленно скользит на дно (из-за.). Как я могу, чтобы полоса прокрутки всегда оставалась внизу, когда я перезагружаю страницу, даже если в чат добавлен новый контент?Прокрутить вниз на страницу загрузить

$(document).ready(function() {  
    var myDataRef = new Firebase('https://ot7fwnsj7h7.firebaseio-demo.com/'); 
    myDataRef.on('child_added', function (snapshot) { 
     var message = snapshot.val(); 
     displayChatMessage(message.name, message.text); 
    }); 

    function displayChatMessage(name, text) { 
     $('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#displayChat')); 
     // make text scroll everytime someone posts 
     $('#displayChat').animate({ 
      scrollTop: $("#displayChat")[0].scrollHeight 
     }, 'slow'); 
    }; 
}); 

И вот моя скрипка:

http://jsfiddle.net/qxkr35pj/

Я надеюсь, что я ясно! Благодарю.

+0

Как насчет добавления '$ ('# displayChat'). ScrollTop (0)'? – im1dermike

ответ

1

Эта строка кода прокручивает элемент вниз. Вызовите его каждый раз, когда вы обновляете представление.

JSFiddle

$("#displayChat")[0].scrollTop = $("#displayChat")[0].scrollHeight 
0

Я думаю, что вы хотите, это вместо того, чтобы ваш код одушевленные:

$('#displayChat').scrollTop($("#displayChat").height());

Вы бы также хотели бы использовать, что каждый раз, когда сообщение будет добавлено - это Возьмем полосу прокрутки до нижней части div.

Смежные вопросы