Question

我正在构建一个聊天应用程序，并且想要一个无限滚动的div来显示消息。

我有这行jQuery：

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

当我在聊天窗口中添加新消息时调用它，它使它在窗口的底部执行漂亮的滚动……对于前几条消息。在前几条消息之后，它将停止运行，并且仅在此之后滚动到同一条消息。

这是一个演示，因此您可以看到完整的实现：

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

它还没有连接到后端，因此请调用以下函数来添加消息

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

Answer 1

您已经将.chatWindow的固定高度设置为80％，jQuery将始终将其读取为其父级的80％。如果您尝试管理日志$(".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");

jQuery ScrollTop可以工作，但只是暂时的？

1 个答案: