JQuery - 滚动并锚定到 ajax 驱动的 div 的底部，除非用户使用演示代码向上滚动答案

【问题标题】：JQuery - Scroll and anchor to bottom of ajax-driven div unless user scrolls up with demo codeJQuery - 滚动并锚定到 ajax 驱动的 div 的底部，除非用户使用演示代码向上滚动
【发布时间】：2017-03-08 23:31:01
【问题描述】：

我正在尝试滚动到 div #chat-feed 的底部，并将溢出设置为自动并保持在那里，除非用户向上滚动该 div 的内容。如果他们向下滚动，则 div 应该锁定到底部，并且新内容将显示在底部。

注意：这将是只读的。最终版本将没有“添加测试消息”或任何按钮或文本输入。这将使观众能够实时观看聊天提要。

这是我目前所拥有的。

<!DOCTYPE html><html class='doesntSupportFlex'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#chat-feed {
    height: 203px; 
    width: 300px; 
    overflow: auto; 
    border: 1px solid black;
}
p.chat-feed {
    border-bottom: 1px dotted black;
    padding: 5px;
    margin: 0;
}
</style>
</head>
<body>


<div id="chat-feed"></div>
<br>
    <div class="form-group">
     <input type="button" name="chat-button" id="chat-button"  value="add test message" class="btn btn-info" />

    </div>

<script>
$(document).ready(function(){
    $('#chat-button').click(function(){
        $.ajax({
            url:"insert.php",
        });
    });

    // Initial load (without this there will be a delay of loaded content)
    $('#chat-feed').load("chat-feed.php");
    var out = document.getElementById("chat-feed"); // outer container of messages

    // generate some chatter every second
    setInterval(function() {


        //check current scroll position BEFORE message is appended to the container
        var isScrolledToBottom = checkIfScrolledBottom();

        $('#chat-feed').load("chat-feed.php");

        // scroll to bottom if scroll position had been at bottom prior
        scrollToBottom(isScrolledToBottom);

    }, 1000);

    function checkIfScrolledBottom() {
        // allow for 1px inaccuracy by adding 1
        return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
    }

    function scrollToBottom(scrollDown) {
        if (scrollDown)
        out.scrollTop = out.scrollHeight - out.clientHeight;
    }
    setTimeout(function() { $("#chat-feed").scrollTop($("#chat-feed")[0].scrollHeight);}, 1200);
});
</script>


</body></html>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您可以删除$('#chat_button) 代码，没问题，但保持其余部分不变。

这里的关键是检测是否滚动底部，然后加载更多内容，如果之前在底部，则重新定位滚动。

$(document).ready(function(){
    var out, isScrolledToBottom;

    out = document.getElementById("chat-feed"); // outer container of messages

    $('#chat_button').click(function(){
        isScrolledToBottom = checkIfScrolledBottom();

        $.ajax({
            url:"insert.php"
        }).done(function() {
            scrollToBottom(isScrolledToBottom);
        });
    });

    // initial load of chat
    $('#chat-feed').load("chat-feed.php", function() {
      out = document.getElementById("chat-feed"); // re-reference after a jQuery .load() as it removes the original dom element and add a new one
      scrollToBottom(true);
    });


    // check for chatter every second
    setInterval(function() {

        isScrolledToBottom = checkIfScrolledBottom();

        $('#chat-feed').load("chat-feed.php", function() {
          out = document.getElementById("chat-feed"); // re-reference after a jQuery .load() as it removes the original dom element and add a new one
          scrollToBottom(isScrolledToBottom);
        });

    }, 1000);

    function checkIfScrolledBottom() {
        // allow for 1px inaccuracy by adding 1
        return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
    }

    function scrollToBottom(scrollDown) {
        if (scrollDown)
        out.scrollTop = out.scrollHeight - out.clientHeight;
    }
    //setTimeout(function() { $("#chat-feed").scrollTop($("#chat-feed")[0].scrollHeight);}, 1200);
});

【讨论】：

demo page 已更新，但由于未通过 AJAX 插入数据，因此似乎有些问题。我手动插入数据并将其加载到#chat-feed 容器中，但它没有保持底部滚动位置。
有一个错字 - 一个杂散的逗号 (url:"insert.php",)。请重试
已更新。它仍然没有插入并且手动插入仍然不尊重滚动位置。
我已经刷新了demo，那个杂乱的逗号还在，请复制粘贴上面的代码
答案仍然显示原始代码，但是，我已经手动删除了 url:"insert.php", 中的逗号。仍然有同样的问题。