当用户向上滚动时暂停 javascript setInterval，然后当用户滚动回底部时重新启动 setInterval

Question

我已经为这个问题苦苦挣扎了一段时间，我有一个聊天框可以使用 ajax 请求将消息发送到数据库。发送新消息时，它会滚动到 div 的底部。然后我使用 jquery 加载函数在 setInterval 函数上从数据库中获取消息。这一切都按预期工作，但如果用户想向上滚动以查看过去的消息怎么办？目前它不允许它作为设置的间隔自动滚动回底部。我见过很多其他类似的问题，但 none 对我的情况有效。

这里是 HTML -

 <div class="dm-cont">
  <div class="dm-body"></div>
</div>

dm-body 本身保存消息的位置。

这是JS脚本，ajax请求提交一条新消息并在滚动到底部时加载消息-

$(".dm-form").submit(function(e) {
    var url = "chat-data/sub-chat.php"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(),
        success: function(data) {
          document.getElementById("dm-input").value = '';
          $('.dm-body').load('chat-data/get-chat.php);
          $(".dm-body").animate({ scrollTop: 20000000 }, "slow");
         }
    });
    e.preventDefault();
});

我的 setInterval 函数每 2 秒加载一次新消息

var reload = setInterval(function () {

    $('.dm-body').load('chat-data/get-chat.php);
    $(".dm-body").animate({ scrollTop: 20000000 }, "slow");

}, 2000);

如果我清除 setInterval on scroll for one 它会因为初始滚动而停止所有重新加载，但它也不会重新启动 setInterval，因此不会加载新消息。

$(".dm-body").scroll(function() { //.box is the class of the div
    // clearInterval(reload);
});

当用户向上滚动至少一定量时它会清除 setInterval，但当用户滚动回底部时它会重新启动 setInterval，我怎么能这样？

Answer 1

您还可以检查 .dm-body div 是否已经向下滚动并使 .load(...) 成为条件。

var reload = setInterval(function () {
    var dmBody = $('.dm-body');

    // div is scrolled completly when scrollTop is equal scrollHeight - clientHeight
    // so we only load new content when we cant scroll down
    if ( dmBody[0].scrollTop === ( dmBody[0].scrollHeight - dmBody[0].clientHeight ) ) {
      dmBody.load('chat-data/get-chat.php');
      dmBody.animate({ scrollTop: 20000000 }, 'slow');
    }

}, 2000);

当用户向上滚动时暂停 javascript setInterval，然后当用户滚动回底部时重新启动 setInterval

Pause javascript setInterval when user scrolls up, then restart setInterval when user scrolls back to bottom

javascript

jquery

ajax

scroll

setinterval