JQuery - 滾動和錨定到ajax驅動的div的底部，除非用戶滾動了演示代碼

我想滾動到底部的＃聊天 - 飼料與溢出設置爲自動和留在那裏，除非用戶滾動div的內容。如果他們向下滾動，div應該鎖定到底部，新的內容將顯示在底部。JQuery - 滾動和錨定到ajax驅動的div的底部，除非用戶滾動了演示代碼

注意：這是隻讀的。在最終版本中不會有「添加測試消息」或任何按鈕或文本輸入。這將使觀衆有能力觀看實時聊天Feed。

這是我到目前爲止。

<!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>

來源

2017-03-08 Damien

可以刪除$('#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); 
});

來源

2017-03-08 23:33:09

的[演示頁]（http://dev.zerosurvival.com/_finished_tests/ajax_feed/index.php）被更新，但會出現的東西，因爲它不是通過AJAX將數據插入到被打破。我手動插入數據並將其加載到'＃chat-feed'容器中，但它沒有保持底部滾動位置。 – Damien

有一個錯字 - 一個流浪的逗號（'url：「insert.php」，'）。請再試一次 –

更新。它仍然不插入手動插入還不尊重滾動位置。 – Damien

JQuery - 滾動和錨定到ajax驅動的div的底部，除非用戶滾動了演示代碼

回答

相關問題