Прокрутка Slimscroll вниз только при обновлении div

Question

Я разрабатываю чат с кометой, и я бы хотел, чтобы Slimscroll прокручивал вниз только при обновлении div, потому что мой скрипт чата обновляет div, добавляя новые сообщения в div. До сих пор я был в состоянии сделать прокрутку Slimscroll вниз каждые 2 секунды.

ПРОБЛЕМА Но проблема в том, что он прокручивает вниз, изменился ли div или нет, и из-за этого пользователь не может прокрутить вверх. Как сделать так, чтобы прокрутить вниз только когда div с id messages_content изменилось или увеличилось в размере?

Это мой код

  $(".slimscroll").slimscroll({
        height: "300px",
        color : "#0073b7",
        alwaysVisible: true,
        size: "10px",
        start: 'bottom',
        railVisible: true,
      railColor: '#0073b7',
      railBorderRadius: 0

    }).css("width", "100%");


     // update content every second
  setInterval(function(){

    // update slimscroll every time content changes
   var en_bas = $('.slimscroll').slimscroll({ scrollBy: '400px' });



  }, 2000);

И это мой код Comet, который использует prototypejs для извлечения информации из базы данных.

<script type="text/javascript">

var Comet = Class.create();
Comet.prototype = {

  timestamp: 0,
  url: './messages_private_travail.php?id_du_membre_envoye=<?php echo $id_ojm_peoples; ?>&id_de_l_autre_originale=<?php echo $id_de_l_autre_originale; ?>&id_message=<?php echo addslashes(@$_GET['id_message']); ?>&chat_between=<?php $chat_between = hash('sha512',"Chat Between $id_ojm_peoples AND $id_de_l_autre_originale");  echo $chat_between;  ?>',
  noerror: true,

  initialize: function() { },

  connect: function()
  {
    this.ajax = new Ajax.Request(this.url, {
      method: 'get',
      parameters: { 'timestamp' : this.timestamp },
      onSuccess: function(transport) {
        // handle the server response
        var response = transport.responseText.evalJSON();
        this.comet.timestamp = response['timestamp'];
        this.comet.handleResponse(response);
        this.comet.noerror = true;
      },
      onComplete: function(transport) {
        // send a new ajax request when this request is finished
        if (!this.comet.noerror)
          // if a connection problem occurs, try to reconnect each 5 seconds
          setTimeout(function(){ comet.connect() }, 5000); 
        else
          this.comet.connect();
        this.comet.noerror = false;
      }
    });
    this.ajax.comet = this;
  },

  disconnect: function()
  {
  },


  handleResponse: function(response)

  {
      //$('messages_content').innerHTML += '<div>' + response['msg'] + '</div>';

    $('messages_content').innerHTML += ' ' + response['msg'] + ' ';



    //On appel la fonction qui permet de jouer le son 
    jouer_son('soundmanager2/audio/beep.mp3');  

    //On applique la fonction qui montre que le message a ete lu par le membre
    mettreajour('nombre_nouveaux_messages', 'messages_lire_marquer_comme_lu.php?id_du_membre_envoye=<?php echo $id_ojm_peoples; ?>&id_de_l_autre_originale=<?php echo $id_de_l_autre_originale; ?>&id_message=<?php echo addslashes(@$_GET['id_message']); ?>&chat_between=<?php $chat_between = hash('sha512',"Chat Between $id_ojm_peoples AND $id_de_l_autre_originale");  echo $chat_between;  ?>', '&id_ojm_peoples=<?php echo $id_ojm_peoples; ?>');


  },

  doRequest: function(request)
  {
    new Ajax.Request(this.url, {
      method: 'get',
      parameters: { 'msg' : request, evalScripts: true } 


    });
  }
}
var comet = new Comet();
comet.connect();
</script>

Answer 1

Вместо того, чтобы следить за событием изменения в DOM, рассмотрите возможность вызова функции прокрутки из функции сценария чата, которая добавляет контент в div, если это возможно. Например:

handleResponse: function(response) {
  jQuery('#messages_content').append(' ' + response.msg + ' ');
  jQuery('.slimscroll').slimscroll({ scrollBy: '400px' });
}

Если цель состоит в том, чтобы при попытке прокрутки вверх не давить пользователю вниз, попробуйте прокрутить его только тогда, когда пользователь уже внизу. Таким образом, они могут прокручиваться вверх без рывков, когда появляется новое сообщение, но когда они уже внизу, оно останется внизу:

handleResponse: function(response) {
  var messages_content = jQuery('#messages_content');
  var shouldScroll = messages_content[0].clientHeight + messages_content[0].scrollTop === messages_content[0].scrollHeight;
  messages_content.append(' ' + response.msg + ' ');
  if (shouldScroll) {
    jQuery('.slimscroll').slimscroll({ scrollBy: '400px' });
  }
}