如何在添加數據時自動滾動 Div 到末尾？

如何在新增資料時自動捲動至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 的屬性及其滾動高度。這有效地將 div 滾動到末尾。

按需實作：

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

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

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

以上是如何在添加數據時自動滾動 Div 到末尾？的詳細內容。更多資訊請關注PHP中文網其他相關文章！