div가 맨 아래로 스크롤되는지 어떻게 확인할 수 있습니까?

84

jQuery 또는 다른 JavaScript 라이브러리를 사용하지 않고 세로 스크롤 막대가있는 div가 맨 아래까지 스크롤되는지 어떻게 확인합니까?

내 질문은 하단으로 스크롤하는 방법이 아닙니다. 나는 그것을하는 방법을 안다. div가 이미 맨 아래로 스크롤되었는지 확인하고 싶습니다.

작동하지 않습니다.

if (objDiv.scrollTop == objDiv.scrollHeight)

javascript scroll scrollbar

— Bjorn
소스

여기서 추측하면 (objDiv.scrollTop> objDiv.scrollHeight) 그리고 scrollHeight에서 스크롤 화살표 크기 (예 : 20px)를 줄여야 할 수도 있습니다.

— Itay Moav -Malimovka

일부 문서 : developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight

— 무하마드 Umer

105

당신은 아주 가까이 사용하고 있습니다 scrollTop == scrollHeight.

scrollTop 스크롤 위치의 상단을 나타냅니다. scrollHeight - offsetHeight

if 문은 다음과 같아야합니다 (삼중 등호를 사용하는 것을 잊지 마십시오).

if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}

편집 : 내 대답을 수정하고 완전히 틀 렸습니다.

— 제임스 데이비스
소스

4

거의 작동하지만 scrollHeight-offsetHeight는 scrollTop과 동일한 값이 아니지만 코드를 시도한 후 그 차이가 5 픽셀 미만이면 원하는 동작을 얻을 수 있습니다.

— Bjorn

1

이것은 정확하지 않습니다. obj.borderWidth를 고려해야합니다

— 반복

2

나는이 대답을 선호 : stackoverflow.com/questions/5828275/...

— 크리스

3

scrollTop정수가 아닐 수 있으므로 obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1모든 상황에서 작동 하려면 약간의 허용 오차 (예 :)가 필요합니다 . 참조 stackoverflow.com/questions/5828275/...

— 크리스 마틴

레이아웃의 고정 요소와 관련이 있거나 내가하고있는 다른 이상한 일과 관련이있을 수 있지만 이것이 참으로 평가되는 유일한 시간은 맨 위로 스크롤 할 때입니다. 이 때문에 document.body.scrollHeight동등한 document.body.offsetHeight내 인스턴스 (크롬)

— 에반 드 라 크루즈

24

테두리, 수평 스크롤바 및 / 또는 부동 픽셀 수와 같은 사항을 고려할 때 올바른 결과를 얻으려면 다음을 사용해야합니다.

el.scrollHeight - el.scrollTop - el.clientHeight < 1

참고 : 올바른 결과를 얻으려면 offsetHeight 대신 clientHeight를 사용해야합니다. offsetHeight는 el에 테두리 또는 가로 스크롤 막대가 없을 때만 올바른 결과를 제공합니다.

— 스펜서
소스

또한 나를 위해 일한 유일한 대답. 스크롤바를 숨기기 위해 패딩을 사용하고 있습니다.

— Craig

clientHeight는 정말 잘 작동했습니다. 허용 된 답변에서 offsetHeight를 사용하여 100 % 정확하지 않은 결과를 얻었습니다

— Finlay Roelofs dec

우아한, 당신은 또한 스크롤 이벤트 뷰와 함께 사용할 수 있습니다 .. 감사 @scroll="scrolling"방법에 다음 scrolling(event) { event.target // as el in the answer }행운을 빕니다

— 야신 Sedrani

10

이 파티에 조금 늦었지만 위의 답변 중 어느 것도 특히 잘 작동하지 않는 것 같습니다.

UHD 디스플레이 용 OS에 디스플레이 스케일링 적용
크기 조정 / 확대가 브라우저에 적용됩니다.

모든 상황을 수용하려면 계산 된 스크롤 위치를 반올림해야합니다.

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

— 매튜 레이튼
소스

이 답변은 제대로 작동하는 첫 번째 답변입니다 ( stackoverflow.com/q/5828275 에서도 답변을 테스트했습니다 ). 다른 사람들이 언급했듯이 여백, 확대 / 축소 및 기타 요소가 작용하며이 모든 요소를 처리하는 것 같습니다. 편집 : 아래 Spencer의 대답은 기본적으로 동일하고 올바른 것 같습니다.

— Jan Bradáč

8

요소가 스크롤의 끝에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

element.scrollHeight - element.scrollTop === element.clientHeight

Mozilla 개발자 네트워크

— 엠마누엘 오시 모수
소스

1

나를 위해 요소가 document.body 인 Chrome을 사용하면 작동하지 않습니다. document.body.scrollHeight와 document.bodyclientHeight같은 값을 가지고 있으므로 표현식이 true 결코 없다.

— Evan de la Cruz

우리가 감지 할 수 있도록 어떤 편집을 할 수 있습니까? 예를 들어 스크롤 하단을 고려, 75 % 미만인 경우

— iamsaksham

0

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>JQuery | Detecting when user scrolls to bottom of div. 
    </title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 

<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">  
            Data Center  
        </h1> 
    <p id="data_center" style="font-size: 17px; font-weight: bold;"></p> 
    <center> 
        <div class="div" style="width:200px; height:150px; overflow:auto;"> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
        </div> 
    </center> 
    <script> 
        $('#data_center').text('Scroll till bottom to get alert!'); 
        jQuery(function($) { 
            $('.div').on('scroll', function() { 
                if ($(this).scrollTop() + $(this).innerHeight() >=  $(this)[0].scrollHeight) {                     
                    alert('End of DIV has reached!'); 
                } 
            }); 
        }); 
    </script> 
</body> 

</html>

저에게도 효과가 있습니다.이 또한 도움이되기를 바랍니다. 감사.

— Kamlesh
소스

0

글쎄, 나는 나 자신에게 똑같이 물었고, 이런 식으로 발견했다. 여기에 이벤트를 사용하여 예제를 넣었다

let scrollableElement = document.querySelector(".elementScrollable")

scrollableElement.addEventListener("scroll",function(event){
  if(event.target.scrollTop === event.target.scrollTopMax){
        console.log("The scroll arrived at bottom")
  }
})

— 엘리엇 윌리엄슨
소스

0

이것은 나를 위해 작동합니다. 약간 다른 접근 방식입니다.

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}

— Aleks Grunwald
소스

0

내가 찾은 해결책은 https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ 나를 위해 일했습니다. .

$(window).on('scroll', function() { 
    if ($(window).scrollTop() >= $( 
        '.div').offset().top + $('.div'). 
        outerHeight() - window.innerHeight) { 
            alert('You reached the end of the DIV'); 
        } 
});

— 히만 슈 파트 니
소스