jQuery. Загрузить обратный вызов / прокрутка / переполнение CSS - PullRequest
Новая
       15

jQuery. Загрузить обратный вызов / прокрутка / переполнение CSS

0 голосов
/ 14 июля 2011

Я работаю над очень простым чатом на основе jQuery (который будет использоваться на вводном семинаре). Текущие чаты отображаются в формате div с высотой 400 пикселей и автоматическим переполнением.

Функция 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) прокрутка работает нормально.

Вот что я знаю / сделал до сих пор:

Обратный вызов вызывается в первый раз, однако, когда я предупредил scrollHeight, это был «400» в первый раз и «441» в последующие (то есть, что должно быть, когда содержимое больше размера div).

Значение scrollTop, равное 400 для содержимого с высоким содержанием 441, должно прокручиваться вниз, независимо от того, но когда я задаю жесткое значение 400 в scrollToBottom, проблема не устраняется. Это заставляет меня думать, что проблема связана с 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 );
     }
   );
}

Эта версия отлично работает в первый раз и во все последующие времена ...

Может кто-нибудь пролить свет на эту ситуацию? Спасибо, Грег

1 Ответ

0 голосов
/ 14 июля 2011

В javascript функции, анонимные или нет, являются первоклассными, что означает, что они могут быть переданы в качестве аргументов. Вам не нужно использовать анонимную форму или вызывать функцию в первый раз. Просто передайте scrollToBottom в качестве аргумента для загрузки: 

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

Аналогично, вы можете упростить вызов setInterval: 

setInterval(getChat, 1000);
...