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

Question 1

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

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

작동하지 않습니다.

if (objDiv.scrollTop == objDiv.scrollHeight)

Question 2

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

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

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

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

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

Question 3

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

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

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

Question 4

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

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

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

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

Question 5

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

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

Mozilla 개발자 네트워크

Question 6

<!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>

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

Question 7

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

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

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

Question 8

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

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