JQuery聊天应用程序只在新消息上滚动到div的底部？

Question

我从多个教程中选择了这个AJAX代码，但问题是，当调用ajax时，div总是滚动到底部。 但是我想要它，以便div只有在div中有新消息时滚动。

$.ajax({
  url: "msg-handle/get-messages.php",
  cache: false,
  data: { room: $("#room").val() },
  success: function(data) { $('#chat').html(data)

$("#chat").scrollTop($("#chat")[0].scrollHeight);

  },
});

}, 500);

有没有办法实现这一点， 而不会对我的代码产生任何重大影响？

Answer 1

我没有尝试过，但我认为必须是这样的......（以及其他解决方案）

var oldscrollHeight = $("#chat")[0].scrollHeight;
                      //Takes the height BEFORE reload the div

$.ajax({
  url: "msg-handle/get-messages.php",
  cache: false,
  data: { room: $("#room").val() },
  success: function(data) { $('#chat').html(data)

    var newscrollHeight = $("#chat")[0].scrollHeight;
                          //Takes the height AFTER reload the div

    if(newscrollHeight > oldscrollHeight){ //COMPARES
        $("#chat").scrollTop($("#chat")[0].scrollHeight); //Scrolls
    }
},
});

我想你必须放一个$("#chat").scrollTop($("#chat")[0].scrollHeight); 在第一次加载聊天之后..只是一个建议。

Answer 2

最简单的方法是让php脚本在div中有新消息时传递一个标志。 然后你只需要为滚动设置一个检查条件。

另一种选择是将新的.get（）结果中的div数与前一个进行比较，并仅在当前存在更多div时滚动。