programing tip

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

itbloger 2020. 9. 14. 08:08
반응형

데이터가 추가 될 때 div 끝으로 자동 스크롤하는 방법은 무엇입니까? [복제]


이 질문에 이미 답변이 있습니다.

다음과 같은 스타일 table내부가 div있습니다.

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

충분한 데이터가 테이블에 추가되면 세로 스크롤 막대가 표시됩니다. 그러나 새 데이터가 추가되면 div요소가 맨 아래로 자동 스크롤되도록하고 싶습니다 .

이를 위해 어떤 JavaScript 코드를 사용할 수 있습니까? 필요한 경우 JQuery의 옵션에 개방되어 있지만 JavaScript 솔루션을 선호합니다.


데이터가에 추가 될시기를 모르는 경우 #data간격을 설정하여 요소의 scrollTop을 몇 초마다 scrollHeight로 업데이트 할 수 있습니다. 데이터 추가시기를 제어하는 ​​경우 데이터 추가 후 다음 함수의 내부를 호출하면됩니다.

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

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

참고 URL : https://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div-when-data-is-added

반응형