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

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

注意：这是只读的。 最终版本上不会有“添加测试消息”或任何按钮或文本输入。 这将使观众能够现场观看聊天节目。

这是我到目前为止所拥有的。

    #chat-feed { height: 203px; width: 300px; overflow: auto; border: 1px solid black; } p.chat-feed { border-bottom: 1px dotted black; padding: 5px; margin: 0; }    
 
 
  
  $(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); });   

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