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

Question

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

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

Это мой slimscroll код

$(".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' }); 
    } 
}