Question

我最近开发了一个在线聊天室。我有一切工作和安全，但我希望存储消息的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("<p>" + output + "</p>");

                    }
                });
            }, 500);

        }

然后div本身从一开始就是空的：<div id="messages"></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.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("<p>" + output + "</p>");
              if(scrollToBottom ){
                   elem.scrollTop = elem.scrollHeight;
              }
        });
    }, 500);
}

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

2 个答案: