jQuery를 사용하여 사용자가 가변 콘텐츠가 있는 Div의 맨 아래에 도달한 시기를 감지하는 방법은 무엇입니까?

jQuery로 Div 스크롤 끝 감지

목표:
사용자가 맨 아래로 스크롤하는 시점 확인

질문:
사용자가 가변적인 콘텐츠 양과 자동으로 설정된 오버플로가 있는 div의 맨 아래에 도달하는 경우를 어떻게 감지할 수 있나요?

답변:

div 스크롤의 끝을 감지하려면 다음 jQuery 속성/메서드를 사용하세요.

• $(). scrollTop(): 요소가 가로 또는 세로로 스크롤된 양을 반환합니다.
• $().innerHeight(): 요소의 내부 높이를 반환합니다.
• DOMElement.scrollHeight: 요소 콘텐츠의 높이를 반환합니다.

처음 두 속성을 결합하여 총 표시 높이를 구하고 이를 스크롤 높이와 비교하여 결정합니다. 사용자가 하단으로 스크롤한 경우.

<code class="javascript">jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('End of div reached');
        }
    })
});</code>

추가 참고 사항:

• 제공된 코드는 jQuery 1.7 구문을 사용합니다. 이전 버전의 경우 .on() 대신 .bind()를 사용하세요.
• 이 솔루션은 div 내부 콘텐츠가 동적으로 추가되거나 제거되더라도 제대로 작동합니다.
• 이벤트 핸들러 조정 원하는 컨테이너와 액션에 맞게

위 내용은 jQuery를 사용하여 사용자가 가변 콘텐츠가 있는 Div의 맨 아래에 도달한 시기를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!