Question

我尝试编写基于jQuery和PHP的实时聊天，其中（当用户发送消息时）他们的聊天会自动滚动到底部以显示最新消息。

当发送或接收消息时，我使用jQuery的追加功能向包含元素添加新div，其中包含单独div中的每条聊天消息。

最初，这是有效的。当我发送消息时，聊天会滚动到元素的底部（否则需要手动向下滚动）。然而，在几条消息之后，它开始滚动到聊天的中间/上部，而不是底部。

这是滚动聊天的jQuery：

$('.live--chat--box--body').scrollTop($('.live--chat--box--body')[0].scrollHeight);

这是包含聊天内容的元素的HTML代码：

<div class="live--chat--box--body">
    <div class="live--chat--top"></div>
    <div class="chat--message--container chat--message--container--self">
        <div class="chat--message chat--message--self">
            <span> Message 1 </span>
        </div>
    </div>
</div>

对每封发送的邮件重复第三次嵌套的div chat - message - container 。

这是 live - chat - box - body 元素的CSS：

float: left;
width: 100%;
max-height: 245px;
height: 245px;
padding: 7px;
box-sizing: border-box;
background-color: #fafafa;
border: 1px solid #d7d7d7;
border-top: none;
border-radius: 1px 1px 0 0;
overflow-y: auto;
position: relative;

我的理论是，一旦聊天达到一定高度，就会开始使用CSS中的最大高度而不是元素的实际高度，这意味着它只会将你带到最大高度的底部 - 而不是比整个高度。但是，这会在用户被允许滚动之后发生，表明它已经超过了溢出之前允许的最大高度。

如果有人知道为什么会这样，我很着迷。

jQuery：在某个溢出高度

0 个答案: