jQuery를 사용하여 스크롤 가능한 Div에서 스크롤 끝을 감지하는 방법은 무엇입니까?

jQuery를 사용하여 스크롤 가능한 Div에서 스크롤 끝 감지

동적 콘텐츠로 작업할 때 다음과 같이 더 많은 콘텐츠를 로드해야 할 수도 있습니다. 사용자가 컨테이너 요소의 맨 아래로 스크롤합니다. jQuery는 스크롤이 활성화된 div에 대해 이 이벤트를 감지하는 편리한 방법을 제공합니다.

사용자가 div의 맨 아래에 도달한 시기를 확인하려면 요소의 scrollTop과 innerHeight의 합을 해당 scrollHeight와 비교할 수 있습니다.

<code class="javascript">if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
  // End of scroll reached
}</code>

코드 구현:

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

설명:

• scrollTop은 픽셀 수를 반환합니다. 요소가 세로로 스크롤되었습니다.
• innerHeight는 스크롤 막대를 제외한 요소의 내부 높이를 검색합니다.
• scrollWidth는 뷰포트 외부 영역을 포함하여 요소 콘텐츠의 전체 높이를 나타냅니다.

scrollTop과 innerHeight의 합이 scrollHeight와 같으면 사용자가 div의 맨 아래까지 스크롤했음을 나타냅니다.

추가 참고:

이전 버전의 jQuery에서는 이벤트 핸들러를 연결하는 데 바인딩()이 사용되었습니다. 그러나 문서에 따르면 on()은 jQuery 1.7부터 선호되는 방법입니다.

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