페이지 로드 시 Div 하단으로 스크롤(jQuery)

페이지 로드 시 Div 하단으로 스크롤(jQuery)

내 페이지에 디브가 있습니다.

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

어떻게 하면 디브를 디브의 맨 아래로 스크롤시킬 수 있습니까?페이지가 아니라 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페이지가 준비되면 더 빨리/더 빨리 수행해야 하는 모든 작업을 수행할 수 있습니다.

이것들 중 어느 것도 저에게 효과가 없었습니다. 저는 페이스북 메신저와 비슷한 웹 앱 안에 메시지 시스템을 가지고 있었고 그 메시지들이 div의 하단에 나타나기를 원했습니다.

이것은 기본적인 자바스크립트로 효과가 있었습니다.

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

사용해 보십시오.

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

다음과 같이 하면 됩니다.부디 참고하세요[0]그리고.scrollHeight

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

대상 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');

애니메이션 jquery(버전 > 2.0)의 경우

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

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

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

그래서...

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

스크롤 높이 및 클라이언트를 확인할 수 있습니다.스크롤이 있는 높이맨 위에서 아래의 코드와 같은 div 맨 아래로 스크롤합니다.

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

$(document).ready(function() {
    let width = $(window).width();
    let element = $("#YourId");
    let positionFromTop = element.offset().top + element.prop("scrollHeight");
    $("html, body").animate({
        scrollTop: Math.abs($(window).height() - positionFromTop)
    }, 500);
});

만약 당신이 단순히 div의 아래쪽으로 스크롤하려고 한다면, 큰 범위 밖의 정수를 사용하면 됩니다. CSS나 높이 참조는 필요 없습니다.

$("#ScrollabledDiv").scrollTop(200000)

아래 코드를 사용하여 divon 페이지 로드 하단으로 스크롤할 수 있습니다.

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

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

이것은 사용자가 메시지를 보낸 후 스크롤 값이 항상 최대값이 되도록 항상 최신 채팅을 다운 상태로 표시하는 메시지 상자입니다.

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

이미지 보기

언급URL : https://stackoverflow.com/questions/10503606/scroll-to-bottom-of-div-on-page-load-jquery