데이터가 추가되면 Div 끝으로 자동 스크롤하는 방법은 무엇입니까?

데이터 추가 시 Div 끝으로 자동 스크롤

HTML 문서에서 테이블은 지정된 스타일의 div 내에 포함됩니다. 수직 스크롤바 가시성을 허용하면서 수평 오버플로를 제한합니다. 목표는 새 데이터가 테이블에 추가될 때 div를 아래쪽으로 자동 스크롤하는 것입니다.

JavaScript 솔루션:

이를 달성하려면 JavaScript 간격 함수를 사용할 수 있습니다. 취업하다. 이 함수는 div의 scrollTop 속성을 주기적으로 업데이트하여 해당 scrollHeight와 일치시킵니다. 이렇게 하면 데이터가 추가될 때 div가 자동으로 아래쪽으로 스크롤됩니다.

다음 코드는 이를 구현하는 방법을 보여줍니다.

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

사용자 정의 이벤트 호출:

데이터 추가 시점을 제어하는 ​​경우 다른 방법은 새 데이터를 추가한 후 함수를 수동으로 호출하는 것입니다. 이렇게 하면 간격 함수가 필요하지 않으며 스크롤 동작 제어에 더 큰 유연성이 제공됩니다.

이를 구현하려면 테이블에 데이터를 추가한 후 위 코드의 내부 함수를 호출하세요.

elem.scrollTop = elem.scrollHeight;

위 내용은 데이터가 추가되면 Div 끝으로 자동 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!