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

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

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

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

2 个答案: