요소가 뷰포트에 보이는지 쿼리 확인
윈도우 스크롤 위치에 관계없이 div 클래스 "media"가 브라우저 비주얼 뷰포트 내에 있는지 확인하는 기능입니다.
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<div class="main">
<div class="media"></div>
</div>
</BODY>
</HTML>
이 기능으로 이 플러그인 https://github.com/customd/jquery-visible 을 사용하려고 하는데 어떻게 작동하는지 모르겠습니다.
$('#element').visible( true );
이와 같이 jQuery 함수를 작성하여 요소가 뷰포트에 있는지 확인할 수 있습니다.
jQuery가 포함된 후 이 내용을 어딘가에 포함합니다.
$.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;
};
샘플 사용량:
$(window).on('resize scroll', function() {
if ($('#Something').isInViewport()) {
// do something
} else {
// do something else
}
});
이것은 요소의 상단과 하단 위치만 확인할 뿐 요소가 뷰포트 밖에 수평으로 있는지는 확인하지 않습니다.
jquery를 사용하여 viewport에 요소가 보이는지 확인합니다.
먼저 요소의 상단 및 하단 위치를 결정합니다.그런 다음 스크롤 위치를 뷰포트 높이에 추가하여 뷰포트 하단(페이지 상단에 상대적인) 위치를 결정합니다.
뷰포트의 맨 아래 위치가 요소의 맨 위 위치보다 크고 뷰포트의 맨 위 위치가 요소의 맨 아래 위치보다 작으면 요소가 뷰포트에 있습니다(최소 부분적으로).간단히 말하면 요소의 일부가 뷰포트의 상한과 하한 사이에 있으면 요소가 화면에 표시됩니다.
이제 if/else 문을 작성할 수 있습니다. 여기서 if 문은 위 조건이 충족될 때만 실행됩니다.
아래 코드는 위에서 설명한 것을 실행합니다.
// this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $("#element").offset().top;
var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
// the element is visible, do something
} else {
// the element is not visible, do something else
}
});
이 답변은 아래 Chris Bier와 Andy가 논의하던 내용을 요약한 것입니다.저는 또한 다음 질문에 대한 답변을 사용하여 제 답변을 공식화했습니다.위치를 스크롤할 때 Div를 표시합니다.
그 플러그인에 대한 문서에 의하면.visible()요소가 보이는지 나타내는 부울을 반환합니다.그럼 이렇게 쓰시겠네요
if ($('#element').visible(true)) {
// The element is visible, do something
} else {
// The element is NOT visible, do something else
}
// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );
부분 탐지:
- True : 전체 요소를 볼 수 있습니다.
- false : 요소의 일부가 표시됨
visible요소가 표시되는지 여부를 나타내는 부울 변수입니다.
var visible = $(".media").visible();
언급URL : https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
'programing' 카테고리의 다른 글
| PySpark의 테이블 데이터 프레임을 csv로 내보내는 방법은 무엇입니까? (0) | 2023.09.10 |
|---|---|
| 다른 열에 그룹화된 평균값을 계산하는 방법 (0) | 2023.09.10 |
| nodejs를 사용하여 기본 브라우저를 열고 특정 URL로 이동하는 방법 (0) | 2023.09.10 |
| MySQL 테이블을 CSV 파일로 내보내기 (0) | 2023.09.05 |
| VBA에서 HTML 전자 메일 본문 글꼴 유형 및 크기 변경 (0) | 2023.09.05 |