JQuery - ユーザーがデモコードをスクロールしない限り、Ajax駆動divのスクロールとアンカー

div＃チャットフィードの下にスクロールしようとしていますが、オーバーフローがautoに設定されていて、 divのコンテンツをアップ。それらが下にスクロールすると、divは下にロックされ、新しいコンテンツが下に表示されます。JQuery - ユーザーがデモコードをスクロールしない限り、Ajax駆動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>

出典

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のスクロールとアンカー

答えて

関連する問題