ユーザーがスクロールしているかどうかを確認し、スクロールしない場合はスクロール位置を

Question

に設定しています。現在チャットサイトで作業しています。チャットボックスは200ミリ秒ごとに更新されます。新しいメッセージが読み込まれると、スクロールバーは下部に配置する必要があります。私はそれをやった。問題は、ユーザーが一番上の位置にスクロールしようとすると、200ミリ秒ごとにスクロールバーが下に下がります（200ミリ秒ごとに新しいメッセージをロードし、スクロールバーを下に移動するように設定したためです）。だからこれが問題です。今私は、ユーザーがスクロールしているか、既にスクロールしているかどうか確認したいと思います。カウントが再生されるときにユーザーが既にスクロールまたはスクロールしている場合、スクロールバーはその位置にとどまります。ユーザーがまったくスクロールせず、今スクロールしている場合、スクロールバーは新しいメッセージが到着するたびに下の位置に移動します。

ここは自分のコードです。

<div class="scrollbar" id="style-2" id="scrollBar"> 
     <div id="conversation"> 
     </div>     
    </div> 

<script> 
function loadConversation(){ 
    $.get("get-conversation.php?to_hash=00000", function(data, status){ 
    document.getElementById("conversation").innerHTML = data; 

    ///Scrolling to bottom 
    var container_height = $("#contain").height(); 
    $("div.scrollbar").scrollTop(container_height+1000000000000); 


}); 

setTimeout(loadConversation,200);  
} 
loadConversation();` 

、私を助けてください。それは私にとって非常に重要です...私はそれを大きく感謝します。

Answer 1

これは少し粗悪です。タイマーの動きは止まりますが、ユーザーがスクロールしているときはスクロールを停止し、ユーザーがスクロールを停止したときにはスクロールを停止します。

var isScrolling = false; 

$(window).scroll(function() { 
    isUserScrolling = true; 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     // do something 
     isUserScrolling = false; 
    }, 250)); 
}); 

function loadConversation(){ 
    if(!isUserScrolling){ 
     $.get("get-conversation.php?to_hash=00000", function(data, status){ 
      document.getElementById("conversation").innerHTML = data; 

      ///Scrolling to bottom 
      var container_height = $("#contain").height(); 
      $("div.scrollbar").scrollTop(container_height+1000000000000); 


     }); 
    } 
    setTimeout(loadConversation,200);  
} 
loadConversation();`