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

我正在研究一个非常简单的基于jQuery的聊天室（将在介绍性研讨会中使用）。当前聊天显示在一个div设置为400px高和溢出自动。jQuery .load回调/滚动/ CSS溢出

jQuery的“加载”函数用于从数据库中检索HTML格式的聊天记录，并将它们放入div中。

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

load语句位于名为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），滚动工作正常。

这是我目前所知/所做的：

回调被调用时的第一次，但是当我惊动了scrollHeight属性，这是“400”第一次和“441”后续时间（即当内容大于div大小时应该是什么）。

对于441高内容，400的scrollTop值应滚动到底部，但是当我在scrollToBottom中放置400的硬值时，问题仍然存在。这让我觉得问题与CSS /滚动相关，而不是负载回调。

该聊天div开始空，但更改它包括一个nbsp或单个字母没有解决问题。使div开始具有足够的硬编码内容，以便滚动DID解决问题。

在这个阶段，似乎滚动条需要可见/活动才能使scrollTop正常工作......但并不能解释为什么它第一次不能正常工作 - 因为回调意图发生后内容加载（因而滚动条应该是可见/活动）...

只是为了使其更为奇怪的是，它工作正常，如果回调函数是一个匿名内嵌一个...

$(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); 
    } 
    ); 
}

此版本第一次和所有后续的时间工作正常...

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

来源

2011-07-14 Greg

如果你想知道为什么我不只是使用内联匿名函数的版本 - 我想避免它，因为语法有点难看，我想尽可能保持车间的清洁和简洁。如果我找不到另一个优雅的解决方案，我会尽量使用它。 – Greg

看起来像.load（）传递scrollToBottom（）作为参数传递给您的第一个检查。第二个代码示例是一个句柄，如果load（）成功并将被触发 – Tyde

在javascript中，函数，匿名或不是，是第一类，这意味着他们可以作为参数传递。您不需要使用匿名表单，也不需要第一次调用该函数。只是通过scrollToBottom作为参数传递给负载：

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

同样，你可以简化的setInterval电话：

setInterval(getChat, 1000);

来源

2011-07-14 06:27:42 Adam

啊，我知道有一些简单的东西我错过了！非常感谢，解决了它。尽管......是否将其纳入研讨会是一个艰难的呼吁...... – Greg

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

回答

相关问题