jQuery를 사용하여 특정 요소가 사용자의 뷰포트에 들어갈 때 이벤트를 트리거하는 방법은 무엇입니까?

jQuery를 사용하여 사용자가 특정 요소로 스크롤할 때 이벤트 트리거

이 시나리오에서는 특정 요소가 실행될 때 경고를 표시하려고 합니다. h1 요소(ID "scroll-to" 포함)가 사용자의 브라우저 보기로 들어갑니다. 이를 달성하려면 페이지 상단에서 요소의 오프셋을 계산하고 이를 현재 스크롤 위치와 비교하세요.

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        console.log('H1 on the view!');
    }
});</code>

위 코드에서:

• offset(). top은 문서 상단에서 요소 상단까지의 거리를 반환합니다.
• outerHeight()는 패딩과 요소를 포함한 요소의 높이를 반환합니다.
• 스크롤 위치가 요소의 오프셋에서 높이와 창 높이를 뺀 값보다 큰지 확인하여 현재 뷰포트에 표시되는지 확인합니다.

또한 요소가 뷰포트에 들어갈 때 요소가 페이드 인되는 등의 다른 작업을 수행하는 이벤트:

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        $('#scroll-to').fadeIn();
    }
});</code>

추가로 감지 기능을 개선하기 위해 로직을 사용하면 요소가 뷰포트 내에 완전히 있는지 확인하는 검사를 추가할 수 있습니다.

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight) && elementOffsetTop > scrollTop && (scrollTop + windowHeight > elementOffsetTop + elementHeight)) {
        //Do something
    }
});</code>

이 업데이트된 로직은 스크롤에 관계없이 요소가 뷰포트에 완전히 표시될 때만 이벤트가 트리거되도록 보장합니다. 방향.

위 내용은 jQuery를 사용하여 특정 요소가 사용자의 뷰포트에 들어갈 때 이벤트를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!