콘텐츠를 추가하는 동안 스크롤 가능한 요소를 "맨 아래"에 유지하세요.

Question

작업 중인 웹 앱용 유틸리티 페이지를 구축 중입니다.일종의 "콘솔"로 사용하고 싶은 요소가 있습니다.

Ajax 호출을 통해 콘솔에 대한 항목을 얻습니다(프로토타입의 Ajax.PeriodicalUpdater).

내가 겪고 있는 문제는 "콘솔" 하단에 새 줄을 삽입할 때 스크롤 막대가 초기 위치에 유지된다는 것입니다(따라서 수동으로 아래로 스크롤하지 않는 한 항상 맨 위 줄이 표시됩니다).

스크롤바를 자동으로 하단에 유지하려면 어떻게 해야 합니까?

나는 이 프로젝트에서 프로토타입이 필요한 몇몇 라이브러리에 프로토타입을 사용하고 있으므로 가능하다면 프로토타입이나 일반 자바스크립트를 사용하는 것을 선호합니다.

참고로 저는 이미 이것을 시도했습니다.

onComplete: function() { 
    $('console').scrollTop = $('console').scrollHeight;
}

그것 거의 작동하지만 항상 "한 단계 뒤처져" 있으며 최신 항목을 볼 수 없습니다.

Answer 1

new Ajax.PeriodicalUpdater(container, url, {
    onComplete: function() {
        (function() {
            container.scrollTop = container.scrollHeight;
        }).defer();
    }
});

Answer 2

허, 저는 거의 똑같은 것(Ajax 콘솔)을 만들고 있었는데, 오버플로된 div가 맨 아래까지 스크롤되지 않는 문제가 있었습니다.

그리고 Stack Overflow가 이 문제를 해결하는 데 도움이 되었습니다!그것이 당신에게도 도움이 되기를 바랍니다!

JavaScript로 오버플로된 DIV 스크롤

편집하다:내 질문에서는 jQuery를 사용했지만 문제는 JS 프레임워크에 있는 것이 아니라 사용 중인 CSS 속성에 있습니다.기본적으로 Math.max(div.scrollHeight, div.clientHeight)를 가져와야 합니다. 일부 브라우저에서는 해당 속성에 약간의 버그가 있기 때문입니다.