콘텐츠를 추가하는 동안 스크롤 가능한 요소를 "맨 아래"에 유지하세요.
-
05-07-2019 - |
문제
작업 중인 웹 앱용 유틸리티 페이지를 구축 중입니다.일종의 "콘솔"로 사용하고 싶은 요소가 있습니다.
Ajax 호출을 통해 콘솔에 대한 항목을 얻습니다(프로토타입의 Ajax.PeriodicalUpdater
).
내가 겪고 있는 문제는 "콘솔" 하단에 새 줄을 삽입할 때 스크롤 막대가 초기 위치에 유지된다는 것입니다(따라서 수동으로 아래로 스크롤하지 않는 한 항상 맨 위 줄이 표시됩니다).
스크롤바를 자동으로 하단에 유지하려면 어떻게 해야 합니까?
나는 이 프로젝트에서 프로토타입이 필요한 몇몇 라이브러리에 프로토타입을 사용하고 있으므로 가능하다면 프로토타입이나 일반 자바스크립트를 사용하는 것을 선호합니다.
참고로 저는 이미 이것을 시도했습니다.
onComplete: function() {
$('console').scrollTop = $('console').scrollHeight;
}
그것 거의 작동하지만 항상 "한 단계 뒤처져" 있으며 최신 항목을 볼 수 없습니다.
해결책
new Ajax.PeriodicalUpdater(container, url, {
onComplete: function() {
(function() {
container.scrollTop = container.scrollHeight;
}).defer();
}
});
다른 팁
허, 저는 거의 똑같은 것(Ajax 콘솔)을 만들고 있었는데, 오버플로된 div가 맨 아래까지 스크롤되지 않는 문제가 있었습니다.
그리고 Stack Overflow가 이 문제를 해결하는 데 도움이 되었습니다!그것이 당신에게도 도움이 되기를 바랍니다!
편집하다:내 질문에서는 jQuery를 사용했지만 문제는 JS 프레임워크에 있는 것이 아니라 사용 중인 CSS 속성에 있습니다.기본적으로 Math.max(div.scrollHeight, div.clientHeight)를 가져와야 합니다. 일부 브라우저에서는 해당 속성에 약간의 버그가 있기 때문입니다.
제휴하지 않습니다 StackOverflow