Question

我有过去几天无法解决的问题。我基于PHP + jQuery编写简单的聊天。我有聊天内容div：

<div class="conversation-message-list" onclick="hideEmoticons()">
    <div id="note">New message</div>
    <div class="conversation-content">
        <div class="row">
           MESSAGE
        </div>
     </div>
</div>

使用jQuery我调用函数refreshChat。这将从mysql中选择新消息并附加到会话内容，如下所示：

$(".conversation-content").append(data.chat);

当有很多消息时，

聊天窗口正在滚动。我需要做的是：当聊天窗口在底部滚动时（用户查看最后一条消息），新消息将被追加并自动滚动到最后一条消息。如果向上滚动用户并附加新邮件，则只显示邮件（在我的代码中带有id =“note”），但不要滚动到最后一条邮件。

总之，我需要与FB聊天相同的功能 - 如果你向上滚动，只会在聊天窗口中显示新消息的警告。如果您聊天并看到聊天的底部，则会显示新消息并在其上滚动。

我处于恶性循环中，我尝试使用$(".conversation-message-list").innerHeight()和$(".conversation-message-list").scrollTop()以及$(".conversation-message-list")[0].scrollHeight)，但我无法做到，我需要什么。谢谢。

以下是refreshChat函数的示例：

function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.getJSON("'.$system->getDomain().'/ajax/refreshChat.php?id="+id, function(data) {
        if(data.kod != "" && data.kod != " " && data.isNew == "1") {
        // Here I want to implement that function
            $(".conversation-content").append(data.chat);
        }
    }
}

Answer 1

您可以在新邮件到来时检查用户是否在聊天容器底部滚动，并将$(".conversation-message-list").scrollTop()设置为较大的值（或新邮件DOM元素的.scrollTop()值如果你有权访问它）在底部滚动：

var $chatContainer = $('.conversation-message-list');

function isScrollAtTheBottom () {
    var scrollTop = $chatContainer.scrollTop(),
            height = $chatContainer.outerHeight();

    return scrollTop + height >= $chatContainer[0].scrollHeight;
}

function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.getJSON("'.$system->getDomain().'/ajax/refreshChat.php?id="+id, function(data) {
        if(data.kod != "" && data.kod != " " && data.isNew == "1") {
            // Here I want to implement that function
            $(".conversation-content").append(data.chat);

            if (isScrollAtTheBottom()) {
                $chatContainer.scrollTop($chatContainer[0].scrollHeight)
            }
        }
    })
}

Answer 2

这是我的最终解决方案：

    var $chatContainer = $(".conversation-message-list");

    function isScrollAtTheBottom () {
        var scrollTop = $chatContainer.scrollTop();

        return $chatContainer.outerHeight() + Math.ceil(scrollTop) == $chatContainer[0].scrollHeight;
    }

    function refreshChat() {
            var id = "'.$convers_id.'";
            var receiver = "'.$system->getFirstName($second_user->full_name).'";

            $.getJSON("'.$system->getDomain().'/ajax/refreshChat.php?id="+id, function(data) {


                    if(data.chat != "" && data.chat != " " && data.isNew == "1") {

                                if (isScrollAtTheBottom()) {
                                    var scroller = $(".conversation-message-list").getNiceScroll(0);
                                    $(".conversation-content").append(data.chat);
                                    $(".conversation-message-list").getNiceScroll(0).resize(0).doScrollTop($(".conversation-content").height(),-1);
                                }
}

感谢@ t1m0n，你告诉我怎么做的方法。

JQuery动态更新div内容，按滚动位置

2 个答案: