jQuery로 스크롤하는 동안 요소 가시성을 어떻게 감지할 수 있나요?

jQuery를 사용하여 스크롤하는 동안 요소 가시성 감지

광범위한 콘텐츠가 포함된 웹페이지를 탐색할 때 사용자가 특정 요소에 도달하면 특정 작업을 트리거하는 것이 필수적입니다. 이 문서에서는 사용자가 지정된 HTML 요소로 스크롤할 때 jQuery를 사용하여 이벤트를 트리거하는 방법을 보여줍니다.

요소 설정

h1 요소가 아래쪽에 배치된 HTML 페이지를 생각해 보세요.

<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

jQuery로 이벤트 트리거

사용자의 브라우저 보기가 h1 요소에 도달하면 경고를 표시하는 것이 목표입니다. 처음에는 h1 요소에 scroll() 메서드를 사용하려고 시도할 수 있지만

<code class="js">$('#scroll-to').scroll(function() {
    alert('you have scrolled to the h1!');
});</code>

이 접근 방식은 원하는 결과를 얻지 못합니다. 대신 페이지를 기준으로 요소의 오프셋을 계산하여 스크롤 위치와 비교해야 합니다.

해결 방법

<code class="js">$(window).scroll(function() {
    var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT + hH - wH)) {
        console.log('H1 on the view!');
    }
});</code>

위 코드는 h1 요소의 하단이 페이지의 보이는 부분에 도달했습니다.

향상

• 데모 바이올린: 기능을 직접 경험해 보세요.
• Alert 대신 FadeIn(): 요소의 가시성을 원활하게 애니메이션화하려면 fadeIn()을 사용하십시오.
• 요소 가시성 검사: 요소가 뷰포트 내에 완전히 있는지 감지하도록 스크립트를 수정하십시오. , 스크롤 방향에 관계없이.

위 내용은 jQuery로 스크롤하는 동안 요소 가시성을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!