0

私はコメットとのチャットを開発しています。チャット スクリプトが div に新しいメッセージを追加して div を更新するため、Slimscroll が div の更新時にのみ下にスクロールするようにしたいと考えています。これまでのところ、Slimscroll を 2 秒ごとに下にスクロールさせることができました。

問題 しかし、問題は、div が変更されたかどうかに関係なく下にスクロールすることです。そのため、ユーザーは上にスクロールできません。idmessages_contentを持つ div のサイズが変更または増加した場合にのみ下にスクロールする方法は?

これは私のスリムスクロールコードです

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

これは、prototypejs を使用してデータベースから情報をフェッチする私の Comet コードです。

<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>
4

1 に答える 1

6

可能であれば、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' });
  }
}
于 2015-02-12T17:31:33.967 に答える