Зачем использовать этот слайдер с флагом?

Question

Я добавил этот рупор коробку из http://www.saaraan.com/2013/04/creating-shout-box-facebook-style живой демо его можно увидеть здесь http://www.saaraan.com/2013/04/creating-shout-box-facebook-style

У меня все работает нормально, за исключением самого ползунка. Каждый раз, когда я пытаюсь прокручивать вверх, он автоматически прокручивается вниз. Он не останется в верхнем положении. Я думаю, проблема здесь.

// load messages every 1000 milliseconds from server. 
load_data = {'fetch':1}; 
window.setInterval(function(){ 
$.post('shout.php', load_data, function(data) { 
$('.message_box').html(data); 
var scrolltoh = $('.message_box')[0].scrollHeight; 
$('.message_box').scrollTop(scrolltoh); 
}); 
}, 1000); 

//method to trigger when user hits enter key 
$("#shout_message").keypress(function(evt) { 
if(evt.which == 13) { 
var iusername = $('#shout_username').val(); 
var imessage = $('#shout_message').val(); 
post_data = {'username':iusername, 'message':imessage}; 

//send data to "shout.php" using jQuery $.post() 
$.post('shout.php', post_data, function(data) { 

//append data into messagebox with jQuery fade effect! 
$(data).hide().appendTo('.message_box').fadeIn(); 

//keep scrolled to bottom of chat! 
var scrolltoh = $('.message_box')[0].scrollHeight; 
$('.message_box').scrollTop(scrolltoh); 

//reset value of message box 
$('#shout_message').val(''); 

Более конкретно здесь

var scrolltoh = $('.message_box')[0].scrollHeight; 
$('.message_box').scrollTop(scrolltoh); 

и здесь

//keep scrolled to bottom of chat! 
var scrolltoh = $('.message_box')[0].scrollHeight; 
$('.message_box').scrollTop(scrolltoh); 

Я изменил 0 до 1 и другие числа, и он фиксирует свиток работать правильно, но он не показывает последний крик, он покажет крик 25, который является последним криком, который должен быть замечен перед удалением. Я не уверен, если это имеет какой-то смысл, но любая помощь будет отличной.

Первое звено сверху показывает весь код, вторая ссылка показывает пример

Answer 1

Попробуйте этот код, я не проверял. Надеюсь, это сработает.

window.setInterval(function() { 
    $.post('shout.php', load_data, function(data) { 
    var old_data = $(".message_box").html(); 
    if (old_data != data) { 
     $(".message_box").html(data); 

      // get scrollHeight 
     var scrollHeight = $(".message_box").get(0).scrollHeight, 
      // get current scroll position 
      scrollTop  = $(".message_box").scrollTop(), 
      // calculate current scroll percentage 
      percentage = Math.round((100/scrollHeight) * scrollTop);; 

     // make sure user is not scrolled to top 
     if (percentage > 80) { 
     $(".message_box").scrollTop(scrollTop); 
     } 
    } 
    }); 
}, 1000);