Javascript scrollTop 未按預期工作

Question

<div id="messages" class="messages"></div>
<hr>
<textarea id="contentofmessage" name="content" type="text" maxlength="320" style="box-sizing: border-box; width: 100%; height: 100px; padding: 10px; font-family: Arial, sans-serif; border-radius: 5px; outline: none; border: 2px solid #D3D3D3; resize: none;" placeholder="Type your message here..."></textarea><br><br>
<button id="submit" class="btn_anchor_for_submit">Send</button>
<script>
$("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);

    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            
            $.ajax({
                type: 'POST',
                url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
                data: {content: $('#contentofmessage').val()},
            });
            loadlink();
            $("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);
        });
    });

function loadlink(){
$(document).ready(function(){
   
   $('#messages').load("https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>");
   

});
}

loadlink(); // This will run on page load

        setInterval(function () {
            var scrollTarget = $('#messages');
            var pos = scrollTarget.scrollTop();
            scrollTarget.load('https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>', function() {
                $('#messages').scrollTop(pos);
            });
        },5000);
</script>

我用了一些php，你自己測試的時候絕對可以更換

編輯！！！

我的目標是在頁面加載時自動向下滾動 div 中的內容。

Answer 1

也許您應該准確描述您的期望？ 在您的屏幕截圖中，您似乎已經處於領先地位。

你想滾動到提交的消息嗎？

var objDiv = document.getElementById("messages");
const { top } = objDiv.getBoundingClientRect();

window.scrollTo({ top } ); // or objDiv.scrollTo({ top });

Answer 2

你的代碼應該是這樣的

$(document).ready(function(){
        $('#messages').html('<h1>Hellow</>');
   window.scrollTo(0, 650);
    function loadlink(){
    $('#messages').html('<h1>Hellow</>');
  }
  loadlink();
  setInterval(function () {
                loadlink();
        },5000);
});

工作小提琴

Answer 3

要在每個內容加載后滾動到#messages div 的底部，您應該滾動該加載的回調......這是異步的（閱讀：需要時間......幾毫秒）

事實上，你沒有。 所以及時的步驟是：

• 1：發送加載請求
• 2：滾動（但 div 可能已經在底部，所以你不會注意到它。
• 3：加載響應到達並更新div。

要在沒有animate()的情況下滾動，它將是： $("#messages").scrollTop( $('#messages').prop("scrollHeight") )

如果你把它作為一個.load()回調，它看起來像：

$('#messages').load("https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>", function(){$("#messages").scrollTop( $('#messages').prop("scrollHeight") )});

由於所有這些都在一行中很難閱讀和最終維護，我建議：

let loadURL = "https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>"
let loadCallback = function(){
  $("#messages").scrollTop( $('#messages').prop("scrollHeight") )
}
$('#messages').load(loadURL, loadCallback)

由於.load()是$.ajax()的簡寫......同樣適用。 但在這里，回調將是您的加載鏈接loadlink 。 所以我建議：

$.ajax({
  type: 'POST',
  url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
  data: {content: $('#contentofmessage').val()},
  success: loadlink
});

您在濫用$(document).ready(function(){}) ...這是一個在 DOM 完全加載時觸發的事件處理程序...所以僅在初始頁面加載時。 下面，我只在該處理程序中放置了必要的內容。

所以這是我建議你嘗試的整個代碼。

function loadlink(){
    let loadURL = "https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>";
    let loadCallback = function(){
      $("#messages").scrollTop($('#messages').prop("scrollHeight"));
    }
    $('#messages').load(loadURL, loadCallback);
}

$(document).ready(function(){
  $('#submit').click(function(e) {
      e.preventDefault();

      $.ajax({
        type: 'POST',
        url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
        data: {content: $('#contentofmessage').val()},
        success: loadlink
      });
  });

  loadlink(); // This will run on page load

  setInterval(function () {
    loadlink();
  },5000);
})