为什么这个喊盒滑块不能正常工作？

Question

I added this shout box from http://www.saaraan.com/2013/04/creating-shout-box-facebook-style a live demo of it can be seen here http://www.saaraan.com/2013/04/creating-shout-box-facebook-style

I have everything working properly except the slider itself. Every time I try to scroll up, it automatically scrolls back down. It wont stay in the up position. I think the problem is here.

// 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('');

More specifically here

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

and here

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

I have changed the 0 to 1 and other numbers and it fixes the scroll to work right but it doesn't show the latest shout, it will show shout 25 which is the last shout to be seen before deletion. Im not sure if this makes any sense but any help would be great.

The first link from top shows the whole code, the second link shows the example

Answer 1

Try this code, I didn't tested it. I hope it will work.

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);