## jQuery를 사용하여 요소가 뷰포트에 표시되는지 확인하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

## jQuery를 사용하여 요소가 뷰포트에 표시되는지 확인하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-10-25 06:29:29

원래의

1099명이 탐색했습니다.

## How to Check if an Element is Visible in the Viewport Using jQuery?

jQuery를 사용하여 뷰포트에서 요소의 가시성 감지

질문:

특정 요소가 예를 들어 "media" 클래스가 있는 요소가 현재 브라우저 뷰포트 내에 있습니까?

답변:

어떤 요소가 뷰포트 내에 표시되는지 확인하려면 스크롤 위치를 지정하려면 다음과 같은 jQuery 함수를 활용할 수 있습니다.

<code class="js">$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};</code>

로그인 후 복사

이 함수는 요소의 상단 및 하단 위치를 뷰포트의 위치와 비교합니다. 요소의 하단 위치가 뷰포트 상단 아래에 있고 상단 위치가 뷰포트 하단 위에 있으면 요소가 보이는 것으로 간주됩니다.

스크롤이나 크기 조정으로 인한 가시성의 변화를 모니터링하려면 다음 이벤트 핸들러를 사용할 수 있습니다.

<code class="js">$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // Perform actions for visible elements
    } else {
        // Perform actions for non-visible elements
    }
});</code>

로그인 후 복사

이 기능은 요소의 수직 뷰포트 상태만 검사한다는 점에 유의하세요. 뷰포트를 넘어 수평으로 확장되는지 여부는 확인하지 않습니다.

위 내용은 ## jQuery를 사용하여 요소가 뷰포트에 표시되는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!