检查div是否滚动到底部，如果没有则单独保留

我最近开发了一个在线聊天室。 我有一切工作和安全，但我希望存储消息的div自动滚动到底部。 我设法用这个Javascript做到了：

window.setInterval(function() { var elem = document.getElementById('messages'); elem.scrollTop = elem.scrollHeight; }, 100); 

但是有了这个，用户根本无法向上滚动，它总是将它们推回到div的底部。 我想要发生的是，如果用户已经在div的底部，那么当出现新消息时，它会将它们滚动到div的底部。 但是如果用户不在div的底部，那么请将它们单独留下直到它们滚动到底部。

这是更新div的jQuery：

 window.onload = function(){ setInterval(function(){ $.ajax({ url: "get.php", type: "GET", success: function(output){ $("div#messages").html("
" + output + "
"); } }); }, 500); } 

然后div本身从一开始就是空的：

如果需要，这是CSS：

 #messages { width: 700px; height: 250px; border: 2px solid black; overflow: auto; -moz-border-radius: 15px; border-radius: 15px; } 

jQuery和Javascript都适用于此，我不限于使用其中一个。

Answer 1

scrollTop ，在最大滚动时，将等于该元素的scrollHeight减去offsetHeight 。 这是因为offsetHeight包含在scrollHeight 。

将scrollTop设置为scrollHeight有效的，因为浏览器会自动将变量调整为允许的最大滚动（ scrollHeight - offsetHeight ）。

这是您应该使用的逻辑：

 if (elem.scrollTop >= (elem.scrollHeight - elem.offsetHeight)) { elem.scrollTop = elem.scrollHeight; } 

只需将if语句elem.scrollTop你将elem.scrollTop指定给elem.scrollTop的elem.scrollHeight

Answer 2

您可以通过将第二个代码块更改为以下内容并删除第一个代码块来轻松完成此操作。

 window.onload = function(){ setInterval(function(){ $.ajax({ url: "get.php", type: "GET", success: function(output){ var elem = document.getElementById('messages'); var scrollToBottom = false; if(elem.scrollTop == elem.scrollHeight){ scrollToBottom = true; } $(elem).html("
" + output + "
"); if(scrollToBottom ){ elem.scrollTop = elem.scrollHeight; } }); }, 500); }