[javascript] 사업부의 하단으로 스크롤?

레일에서 아약스 요청을 사용하여 채팅을 만들고 있으며 많은 운없이 div를 맨 아래로 스크롤하려고합니다.

이 div의 모든 것을 감싸고 있습니다.

#scroll {
    height:400px;
    overflow:scroll;
}

JS를 사용하여 기본적으로 맨 아래로 스크롤하는 방법이 있습니까?

아약스 요청 후 맨 아래로 스크롤하는 방법이 있습니까?

답변

내 사이트에서 사용하는 내용은 다음과 같습니다.

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

답변

jQuery scrollTop을 사용하는 경우 훨씬 쉽습니다 .

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

답변

다음 코드를 사용할 수 있습니다 :

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

JQuery 로 부드러운 스크롤 을 수행하려면

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

JSFiddle 의 예 를 참조하십시오

이것이 작동하는 이유는 다음과 같습니다.

참조 : scrollTop , scrollHeight , clientHeight

답변

사용 의 jQuery 애니메이션을 :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

답변

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

jQuery 1.6에서 작동

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

답변

모든 최신 브라우저 에서 작동하는 최신 방법 :

this.scrollIntoView(false);

답변

자바 스크립트로 부드러운 스크롤 :

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });