当用户向上滚动时暂停javascript setInterval，当用户滚动回到底部时重新启动setInterval
当用户向上滚动时暂停javascript setInterval，当用户滚动回到底部时重新启动setInterval
提问于 2021-06-05 06:15:05
我已经在这个问题上挣扎了一段时间了，我有一个使用ajax请求向DB发送消息的聊天箱。当发送新消息时，它会滚动到div的底部。然后，我使用jquery load函数在setInterval函数上从DB获取消息。这一切都像预期的那样工作，但如果用户想要向上滚动查看过去的消息呢？目前它不允许它，因为设置的时间间隔自动滚动回底部。我见过很多其他类似的问题，但没有一个适合我的情况。
这是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，它会因为初始滚动而停止所有重新加载，但它也不会重新启动setInterval，因此不会加载任何新消息。
$(".dm-body").scroll(function() { //.box is the class of the div
// clearInterval(reload);
});当用户向上滚动至少一定的量时，它清除了setInterval，但是当用户滚动回到底部时，它重新启动了setInterval，我怎么能有它呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-05 06:33:27
您还可以检查.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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67844546
复制相关文章
相似问题
腾讯云开发者
