jQuery를 사용하여 사용자가 Div의 맨 아래로 스크롤할 때를 감지하는 방법

" 자동" 오버플로 설정. 사용자 경험을 향상시키기 위해 사용자가 이 div 상자의 아래쪽으로 스크롤할 때 추가 콘텐츠를 로드하려고 합니다. 그러나 특정 이벤트를 감지하는 방법을 잘 모르겠습니다.

이 감지의 핵심은 특정 jQuery 속성 및 메서드를 활용하는 데 있습니다.

• $().scrollTop(): 요소가 스크롤된 픽셀 수를 나타냅니다.
• $().innerHeight(): 요소의 내부 높이를 나타냅니다. 요소
• DOMElement.scrollHeight: 요소 콘텐츠의 높이를 반환합니다.

사용자가 div 하단에 도달한 시기를 확인하려면 처음 두 속성의 합을 비교할 수 있습니다. 세 번째 속성으로 이동합니다. 이 값이 일치하면 div의 끝에 도달한 것입니다.

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

이 솔루션은 jQuery 버전 1.7에서 이벤트 처리에 선호되는 on() 메서드를 활용합니다.

추가 참고 사항:

• 이벤트 리스너는 모니터링하려는 요소를 나타내는 #flux ID가 있는 div에 연결됩니다.
• Alert() 함수는 데모 목적으로 사용됩니다. 여기에 추가 콘텐츠를 로드하기 위한 고유한 논리를 포함할 수 있습니다.
• 실시간 예제는 http://jsfiddle.net/doktormolle/w7X9N/에서 찾을 수 있습니다.