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

【问题标题】：JQuery chat application scroll to bottom of div ONLY on new message?JQuery 聊天应用程序仅在新消息上滚动到 div 的底部？
【发布时间】：2012-02-05 23:11:10
【问题描述】：

我从多个教程中选择了这个 AJAX 代码，但问题是，当调用 ajax 时，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);

有没有办法在不对我的代码产生任何重大影响的情况下实现这一目标？

【问题讨论】：

标签： javascript jquery css ajax html

【解决方案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);.. 只是一个建议。

【讨论】：

【解决方案2】：

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

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

【讨论】：

嗯。有趣的。我会试试的。
只是大声思考......为什么不给最新消息一个唯一的ID？或为每条消息附加一个带有序列号的唯一 ID？这样您在删除旧消息时就不会遇到问题（为了避免性能问题，不要让浏览器一次显示对话的 8,000 条消息）。
嗯，我限制了日志中显示的数量，但是是的，我是这么想的。
如何查看div中有多少div？