jQuery动态更新div内容，按滚动位置跳转答案

【问题标题】：JQuery dynamic update div content, jump by scroll positionjQuery动态更新div内容，按滚动位置跳转
【发布时间】：2016-04-25 06:54:24
【问题描述】：

我有过去几天无法解决的问题。我编写了基于 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);
        }
    }
}

【问题讨论】：

标签： javascript php jquery html ajax

【解决方案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)
            }
        }
    })
}

【讨论】：

谢谢，看起来很不错。聊天在div中滚动，没有滚动整个页面，但滚动只在聊天div中（conversation-message-list）。我可以问你，你能改变你的代码来处理这个吗？不适用于整个页面，仅用于此聊天 div。非常感谢。
谢谢，但还不是很好。我添加了 console.log(scrollTop);控制台.log（高度）； console.log($chatContainer[0].scrollHeight);到 isScrollAtTheBottom 函数，结果是：8132.222437652546 337 8540 并且没有提供滚动，因为你的函数中的条件没有通过。有什么想法我做错了吗？
@BranislavViest 尝试将.height() 更改为.outerHeight()，-height = $chatContainer.outerHeight();。如果.conversation-message-list 有padding 那么outerHeight() 也应该计算它。

【解决方案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，你告诉我怎么做。

【讨论】：