检查用户是否正在滚动，如果没有，则将滚动位置设置为底部

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();`