Блог

Я создаю приложение для чата и хочу, чтобы для сообщений был div с бесконечной прокруткой.

У меня есть эта строка jQuery:

 $(".chatWindow").animate({ scrollTop: $(this).height() }, "slow");
  

Я вызываю его, когда добавляю новое сообщение в окно чата, и это заставляет его выполнять приятную прокрутку до нижней части окна … для первых нескольких сообщений. После первых нескольких сообщений он перестает функционировать и только после этого переходит к тому же сообщению.

Вот демо-версия, чтобы вы могли увидеть полную реализацию:

http://fireowldesigns.com/351/mainpage.html

Он еще не подключен к серверной части, поэтому вызовите следующую функцию, чтобы добавить сообщение

 loadMessages("username", "message", "time") 
  

Вы установили .chatWindow с фиксированной высотой 80%, jQuery всегда будет считывать это как 80% от своего родительского значения. Если вы попытаетесь запустить console log $(".chatWindow").height() , вы увидите, что это всегда одно и то же значение, независимо от длины div.

Одно простое решение — удалить фиксированную высоту и прокрутку переполнения из .chatWindow, перенести ее в другой контейнер и изменить функцию прокрутки. Вот пример:

 <div class="chatWindowWrapper">
    <div class="chatWindow">
        ...
    </div>
</div>


.chatWindowWrapper{
    width: 100%;
    height: 80%;
    overflow-y: scroll;
}
.chatWindow{
    width: 100%;
}


$(".chatWindowWrapper").animate({ scrollTop: $(".chatWindow").height() }, "slow");