JQuery - 除非用户向上滚动，否则滚动并锚定到 ajax 驱动的 div 的底部

Question

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

已知问题：我曾尝试使用我的代码实现 this answer，但我对 Javascript 的了解还不够，无法使其正常工作。如果来自chat-feed.php 的内容高于容器，则滚动条将停留在顶部。给出的答案似乎也不尊重从外部文件加载的内容。

关键点：新内容应该显示在底部，并且当新内容加载时，div 应该滚动到底部，除非用户已经向上滚动了一点。如果用户向下滚动，那么它应该锁定到底部并且新内容显示在底部并且可见。

<div id="chat-feed" style="height: 200px; width: 300px; overflow: auto;"></div>


<script>
$(document).ready(function(){
    setInterval(function(){
        $('#chat-feed').load("chat-feed.php").fadeIn("slow");
    }, 1000);
});
</script>

Demo link

Answer 1

关于您链接到的问题，https://stackoverflow.com/a/21067431/1544886 有更好的实现。

我在下面修改了该作者的代码：

$(document).ready(function() {

  var out = document.getElementById("chat-feed"); // outer container of messages
  var c = 0; // used only to make the fake messages different

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

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

    // append new mesage here
    $('#chat-feed').append("<div>Some new chat..." + c++ + "</div>").fadeIn("slow");

    // 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;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="chat-feed" style="height: 150px; width: 300px; overflow: auto;"></div>

更新

JQuery 的.load() 函数删除关联元素（chat-feed）并重新添加。这意味着out 变量指向旧的已删除元素，而不是新元素。解决方案是在执行.load() 后更新out 变量：

$('#chat-feed').load("chat-feed.php").fadeIn("slow");
out = document.getElementById("chat-feed"); // outer container of messages