페이지로드시 Div의 맨 아래로 스크롤 (jQuery)

내 페이지에 div가 있습니다.

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

div를 div의 맨 아래로 스크롤하려면 어떻게해야합니까 ?? 페이지가 아니라 DIV입니다.

다른 솔루션은 여기에 실제로 내용의 많은 div에 대한 일을 - 그것은 "maxes에서"(대신의 높이의 DIV의 높이 아래로 스크롤 컨텐츠 사업부의). 따라서 내부 컨텐츠의 div 높이가 두 배 이상이 아닌 한 작동합니다.

올바른 버전은 다음과 같습니다.

$('#div1').scrollTop($('#div1')[0].scrollHeight);

또는 jQuery 1.6 이상 버전 :

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

또는 애니메이션 :

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

현재 "허용 된"답변을 포함하여 여기에서 볼 수있는 모든 답변은 실제로 설정 한 점에서 잘못되었습니다.

scrollTop = scrollHeight

올바른 접근 방법은 다음과 같습니다.

scrollTop = scrollHeight - clientHeight

다시 말해:

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

또는 애니메이션 :

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

업데이트 : 완전한 답변 은 Mike Todd의 솔루션 을 참조하십시오 .

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

애니메이션을 원한다면 (1000 밀리 초 이상)

$('#div1').scrollTop($('#div1').height())

당신이 그것을 즉시 원한다면.

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

이것은 페이지의 높이를 잡고 창이로드되면 아래로 스크롤합니다. 1000페이지가 준비되면를 더 빠르고 느리게하기 위해 필요한 것으로 변경하십시오 .

이 시도:

$('#div1').scrollTop( $('#div1').height() )

대상 div의 맨 아래로 창을 스크롤하십시오.

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

다음이 작동합니다. 제발 참고 [0]및scrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

jquery에서 애니메이션 용 (버전> 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

이 중 어느 것도 나를 위해 일하지 않았습니다. 웹 응용 프로그램 내에 Facebook 메신저와 비슷한 메시지 시스템이 있으며 메시지가 div의 맨 아래에 나타나기를 원했습니다.

이것은 기본적인 Javascript를 다루었습니다.

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

Vue로 마이그레이션하려고하는 기존 코드베이스에서 일하고 있습니다.

내 특정 상황 (부트 스트랩 모달로 싸인 스크롤 가능한 div)에서 v-if는 새로운 내용을 보여 주었고 페이지를 아래로 스크롤하기를 원했습니다. 이 동작이 작동하려면 vue가 다시 렌더링을 완료 할 때까지 기다린 다음 jQuery를 사용하여 모달의 맨 아래로 스크롤해야합니다.

그래서...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

아래 코드를 사용하여 페이지로드시 div의 맨 아래로 스크롤 할 수 있습니다.

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

scrollTop으로 scrollHeight 및 clientHeight를 확인하여 아래 코드와 같이 div의 맨 아래로 스크롤 할 수 있습니다.

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

페이지가로드되면 스크롤은 최대 값입니다.

사용자가 메시지를 보낸 다음 항상 최신 채팅을 아래로 표시하여 스크롤 값이 항상 최대가되도록하는 메시지 상자입니다.

$('#message').scrollTop($('#message')[0].scrollHeight);

이미지 참조