Jquery는 요소가 뷰포트에 보이는지 확인합니다 [중복]
이 질문에 이미 답변이 있습니다.
창 스크롤 위치에 관계없이 div 클래스 "미디어"가 존재하는 함수입니다.
<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 );
글쎄, 어떻게 작동 시키려고 했니? 해당하는 문서에 대한 문서에 따르면 .visible()요소가 표시 여부를 선언합니다. 따라서 다음과 같이 사용합니다.
if ($('#element').visible(true)) {
// The element is visible, do something
} else {
// The element is NOT visible, do something else
}
jquery를 사용하여 요소가 뷰포트에 표시 표시 확인합니다.
먼저 요소의 상단 및 하단 위치를 결정하십시오. 그런 다음 스크롤 위치를 표시 영역 높이에 추가하여 표시 영역의 하단 위치 (페이지 상단 기준)를 결정합니다.
뷰포트의 맨 아래 위치가 요소의 맨 위 위치보다 위치가 뷰포트의 맨 위 위치가 요소의 맨 아래보다 작 으면 요소가 뷰포트에있는 것입니다. 간단히 말해서, 요소의 일부가 뷰포트의 상단 및 하단 경계 사이에 있으면 해당 요소가 화면에 표시됩니다.
이제 위의 조건이 실행되는 경우 만 문이 실행되는 경우 문을 사용할 수 있습니다.
아래 코드는 내용을 실행합니다.
// 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가 아래에서 논의한 내용을 요약 한 것입니다. 저처럼 연구를하면서이 질문을 발견하는 다른 사람들에게 도움이되기를 바랍니다. 나는 또한 내 대답을 공식화하기 위해 다음 질문에 대한 대답을 사용했습니다. Show Div when scroll position .
이와 같은 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
}
});
이것은 요소의 위쪽 및 아래쪽 위치 만 확인하고 요소가 수평으로 뷰포트 외부에 있는지 확인하지 않습니다.
이 예 를 볼 수 있습니다 .
// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );
detectPartial :
- True : 전체 요소가 표시됩니다.
- false : 요소의 일부가 표시됩니다.
visible 요소가 표시되는지 여부를 나타내는 부울 변수입니다.
var visible = $(".media").visible();
참고 URL : https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
'ProgramingTip' 카테고리의 다른 글
| redux에서 특정 배열 항목 내부의 단일 값을 업데이트하는 방법 (0) | 2020.10.04 |
|---|---|
| elisp에서 운영을 확인하는 방법은 무엇입니까? (0) | 2020.10.04 |
| mongodb 그룹 값을 여러 필드로 (0) | 2020.10.04 |
| 프록시 뒤에서 sbt를 사용하는 방법은 무엇입니까? (0) | 2020.10.04 |
| "Microsoft .NET Core 1.0.0 RC2-VS 2015 Tooling Preview 1"을 제거해야합니까? (0) | 2020.10.04 |