데이터 추가 시 Div의 끝으로 자동 스크롤하는 방법

동적 웹 콘텐츠로 작업할 때 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 속성을 해당 scrollHeight로 업데이트합니다. 이렇게 하면 div가 끝까지 효과적으로 스크롤됩니다.

주문형 구현:

div에 데이터가 추가되는 시점을 제어할 수 있는 경우 스크롤을 구현할 수 있습니다. 새 데이터를 추가한 후 다음 함수를 호출하여 수동으로 동작합니다.

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

이 함수는 요소를 인수로 사용하고 요소의 scrollTop 속성을 scrollHeight로 설정하여 요소를 아래쪽으로 스크롤합니다. 원하는 자동 스크롤 효과를 얻으려면 div에 새 데이터가 추가될 때마다 이 함수를 호출하기만 하면 됩니다.