Slimscroll 仅在 div 更新时向下滚动

Question

我正在开发与 Comet 的聊天，我希望 Slimscroll 仅在 div 更新时向下滚动，因为我的聊天脚本通过向 div 添加新消息来更新 div . 到目前为止，我能够让 Slimscroll 每 2 秒向下滚动一次。

问题但问题是，无论 div 是否已更改，它都会向下滚动，因此，用户无法滚动到顶部。如何使其仅在 ID 为 messages_content 的 div 大小发生变化或增加时才向下滚动？

这是我的 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' });
}

如果 objective 是为了防止它在尝试向上滚动时将用户推回到底部，还可以考虑让它仅在用户已经位于底部时才滚动。这样他们就可以向上滚动而不会在新的 post 进来时被拉下来，但是当他们已经在底部时，它将留在底部：

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

Slimscroll 仅在 div 更新时向下滚动

Slimscroll scroll down only on div update

jquery

prototypejs

slimscroll