如何在新增資料時自動捲動至Div 的結尾

處理動態Web 內容時，通常希望讓div 等元素自動捲動到新增資料時的底部。這是聊天視窗或無限滾動資料表等元素的常見要求。

考慮這樣一個場景：您有一個表格包含在固定高度的 div 中，並且您希望它自動滾動到末尾當添加新資料時。本文探討了實作此行為的 JavaScript 解決方案。

JavaScript 方法

使用間隔：

如果資料新增的時間未知，您可以設定一個時間間隔來定期更新div的scrollTop屬性以匹配其scrollHeight。這可以確保 div 始終滾動到底部，即使在間隔之間新增資料也是如此。

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

在此範例中，setInterval 函數每 5 秒（5000 毫秒）運行一次，並使用其滾動高度更新 div 的scrollTop 屬性。這有效地將 div 滾動到末尾。

按需實作：

如果您可以控制何時將資料新增至div，則可以實現滾動新增資料後透過呼叫下列函數手動行為：

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}

函數接受一個元素作為參數，並將其scrollTop屬性設為其scrollHeight，這會將元素捲動到底部。只要將新資料新增至 div 時呼叫此函數即可實現所需的自動滾動效果。