jQuery .load回调/滚动/CSS溢出 [英] jQuery .load callback / scrolling / CSS overflow

问题描述

我正在一个非常简单的基于jQuery的聊天室(将在入门讲习班中使用). 当前聊天显示在设置为400像素高且自动溢出的div中.

I'm working on a very simple jQuery based chat room (to be used in an introductory workshop). The current chats are displayed in a div set to 400px high and overflow auto.

jQuery的加载"功能用于从数据库中检索HTML格式的聊天记录并将其放入div.

jQuery's "load" function is used to retrieve HTML formatted chats from a database and place them into the div.

我有一些非常简单的代码，可确保始终将chat div滚动到底部.这段代码位于一个名为scrollToBottom的函数中，该函数使用加载函数中的完成回调功能进行调用:

I've got some very simple code that ensures the chat div is scrolled to the bottom at all times. This code is in a function named scrollToBottom which is called using the completion callback feature in the load function:

load语句位于名为getChat的函数中，该函数在页面准备好后每秒调用一次.这是相关的代码块:

The load statement is in a function called getChat, which is called when the page is ready and then once per second. Here's the relevant chunk of code:

$(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)，滚动正常.

The Problem: The first time getChat is called, the div doesn't scroll to the bottom. In subsequent calls (via setInterval), the scrolling works fine.

这是我到目前为止知道/已经做过的事情:

Here's what I know / have done so far:

第一次调用回调，但是当我通知scrollHeight时，它是第一次"400"，随后是"441"(即，当内容大于div大小时应该是什么).

The callback IS being called the first time, however when I alerted the scrollHeight, it was "400" the first time and "441" subsequent times (i.e. what it should be when there is content bigger than the div size).

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

A scrollTop value of 400 for 441 high content should scroll to the bottom regardless, but when I put a hard value of 400 in scrollToBottom the problem persists. This makes me think the problem is related to CSS / scrolling rather than the load callback.

聊天div最初是空的，但将其更改为包含nbsp或单个字母不是即可解决该问题.使div从足够的硬编码内容开始，需要滚动 DID 即可解决问题.

The chat div starts out empty, but changing it to include a nbsp or single letter didn't solve the problem. Making the div start out with enough hard-coded content to require scrolling DID solve the problem.

在这个阶段，为了使scrollTop正常工作，滚动条似乎需要可见/活动...但是并没有解释为什么它第一次不起作用-因为回调是要发生的之后加载了内容(因此滚动条应该是可见的/活动的)...

At this stage, it seems like the scrollbars need to be visible/active in order for scrollTop to work... but doesn't explain why it isn't working the first time - since the callback is meant to happen AFTER the content is loaded (and hence the scrollbar should be visible/active)...

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

Just to make it stranger still, it works fine if the callback function is an anonymous inline one...

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

此版本在第一次和以后的所有时间都可以正常工作...

This version works fine the first time and all subsequent times...

有人能阐明这种情况吗? 谢谢， 格雷格

Can anyone shed any light on this situation? Thanks, Greg

推荐答案

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

In javascript, functions, anonymous or not, are first class, which means they can be passed as arguments. You needn't use the anonymous form, nor call the function the first time. Just pass scrollToBottom as an argument to load:

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

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

Likewise, you could simplify the setInterval call:

setInterval(getChat, 1000);

这篇关于jQuery .load回调/滚动/CSS溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！