Nice programing

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

nicepro 2020. 12. 8. 20:01
반응형

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


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

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

작동하지 않습니다.

if (objDiv.scrollTop == objDiv.scrollHeight) 

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

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

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

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

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


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

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

Mozilla 개발자 네트워크


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

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

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


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

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

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

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

참고 URL : https://stackoverflow.com/questions/876115/how-can-i-determine-if-a-div-is-scrolled-to-the-bottom

반응형