jQuery .load 回调/滚动/CSS 溢出

Question

我正在开发一个非常简单的基于 jQuery 的聊天室（将在介绍性研讨会中使用）。 当前聊天显示在高度设置为 400 像素并自动溢出的 div 中。

jQuery 的“load”函数用于从数据库中检索 HTML 格式的聊天并将其放入 div 中。

我有一些非常简单的代码，可以确保聊天 div 始终滚动到底部。此代码位于名为scrollToBottom 的函数中，该函数是使用加载函数中的完成回调功能来调用的：

加载语句位于名为getChat 的函数中，该函数在页面准备好时调用，然后每秒调用一次。这是相关的代码块：

$(function()
{
    getChat();
    setInterval("getChat();", 1000);
});


function getChat()
{
    $("#chatDiv").load("chat_server.php?get_chats=true", scrollToBottom() );
}


function scrollToBottom()
{
    var chatHeight = document.getElementById("chatDiv").scrollHeight;
    $("#chatDiv").scrollTop( chatHeight );
}

问题： 第一次调用 getChat 时，div 不会滚动到底部。在后续调用（通过 setInterval）中，滚动工作正常。

这是我到目前为止所知道/所做的：

回调是第一次被调用，但是当我警告滚动高度时，第一次是“400”，随后是“441”（即有内容时应该是什么）大于 div 大小）。

无论如何，对于 441 高内容，scrollTop 值为 400 应该滚动到底部，但是当我在scrollToBottom 中设置硬值 400 时，问题仍然存在。 这让我认为问题与 CSS/滚动有关，而不是与加载回调有关。

聊天 div 一开始是空的，但将其更改为包含 nbsp 或单个字母并没有解决问题。让 div 从足够的硬编码内容开始，需要滚动确实解决了问题。

在这个阶段，似乎滚动条需要可见/活动才能使滚动顶部工作...但没有解释为什么它第一次不起作用 - 因为回调应该在之后发生 内容已加载（因此滚动条应该可见/活动）...

只是让它更奇怪，如果回调函数是匿名内联函数，它就可以正常工作...

$(function()
{
    getChat();
    setInterval("getChat();", 1000);
});


function getChat()
{
   $("#chatDiv").load("chat_server.php?get_chats=true", 
     function()
     {
        var chatHeight = document.getElementById("chatDiv").scrollHeight;
        $("#chatDiv").scrollTop( chatHeight );
     }
   );
}

这个版本第一个工作正常一次以及随后的所有次...

任何人都可以阐明这种情况吗？ 谢谢， 格雷格

Answer 1

在 javascript 中，函数，无论是否匿名，都是一流的，这意味着它们可以作为参数传递。您不需要使用匿名形式，也不需要第一次调用该函数。只需将scrollToBottom作为参数传递给load即可：

$("#chatDiv").load("chat_server.php?get_chats=true", scrollToBottom);

同样，您可以简化setInterval调用：

setInterval(getChat, 1000);