如何在新增資料時自動將DIV滾動到底部？

添加數據時自動滾動DIV 到底部

在有限高度的DIV 中顯示數據時，通常希望DIV 自動滾動到末尾，如下所示添加新數據。這增強了用戶體驗，並確保無需手動滾動即可看到最新資訊。

CSS 設定

要在 DIV 內啟用垂直捲動，需要將其 CSS Overflow-y 屬性設為「可見」並指定固定高度。例如：

#data {
  overflow-x: hidden;
  overflow-y: visible;
  height: 500px;
}

JavaScript 解決方案

要在新增資料時自動將DIV 捲動到底部，可以使用以下JavaScript 程式碼：

function scrollToBottom(element) {
  element.scrollTop = element.scrollHeight;
}

這個函數接受DOM 元素作為參數，並將其scrollTop 屬性設為等於其scrollHeight 屬性。這會導致元素一直滾動到底部。

用法

如果您不知道何時將資料新增至DIV，您可以定期呼叫scrollToBottom 函數間隔，例如：

window.setInterval(function() {
  var elem = document.getElementById('data');
  scrollToBottom(elem);
}, 5000); // Run every 5 seconds

或者，如果您控制何時新增數據，則可以在新增資料後簡單地呼叫scrollToBottom函數資料。

以上是如何在新增資料時自動將DIV滾動到底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！