jQuery를 사용하여 사용자가 Div의 맨 아래로 스크롤한 경우를 감지하는 방법은 무엇입니까?

jQuery를 사용하여 Div 하단으로의 스크롤 감지

자동 오버플로를 사용하여 div 내의 가변 높이 콘텐츠로 작업할 때 다음을 결정합니다. 사용자가 div의 맨 아래에 도달하는 것은 어려울 수 있습니다. 이 기사에서는 jQuery를 사용하여 이 이벤트를 감지하는 솔루션을 제공합니다.

Div 차원 이해

사용자가 div의 맨 아래로 스크롤할 때를 감지하려면 다음을 이해하는 것이 중요합니다. div 크기와 관련된 속성 및 메서드.

• scrollTop(): 콘텐츠가 수직으로 아래로 스크롤된 픽셀 수를 반환합니다.
• innerHeight(): 스크롤 막대와 테두리를 제외한 div의 내부 높이를 반환합니다.
• scrollHeight: 숨겨진 콘텐츠를 포함한 div 콘텐츠의 전체 높이를 반환합니다.

하단 스크롤 이벤트 감지

다음 jQuery 코드는 사용자가 div의 하단에 도달한 시기를 감지할 수 있습니다.

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

코드 설명

• $(#flux): ID가 "flux"인 div를 선택합니다.
• ('scroll'): 스크롤 이벤트를 div에 바인딩합니다.

• if($(this).scrollTop() $(this).innerHeight() >= $(this)[0].scrollHeight):

  • 현재 스크롤 위치와 내부 높이의 합이 전체 콘텐츠 높이보다 크거나 같은지 확인합니다.
  • true인 경우 이 조건은 사용자가 div 하단 또는 그 이상으로 스크롤했음을 나타냅니다.
• alert('endreached'): 콘텐츠 종료 시 알림 메시지

위 내용은 jQuery를 사용하여 사용자가 Div의 맨 아래로 스크롤한 경우를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!