[Jquery] 스크롤시 특정 엘리먼트가 화면에 보이는지 확인하기

Jquery-Visible 이란 Jquery 라이브러리를 사용한다. 링크를 클릭하여, jquery.visible.js 를 다운로드 하여 주자.

사용법 자체가 간단하기도 하고, 깃헙에도 설명이 되어 있으니 잡다한 기능보다는 그냥 스크롤 이벤트 발생시 해당 요소가 화면에서 보이는지 체크하는 예제를 따라해보도록 하자.

Jquery 의 scroll 이벤트를 document 에 바인딩 한 후 소스코드를 집어넣으면 된다.

$(document).scroll(function() {
  console.log($("element").visible());
}

visible 메서드는 반환형태가 bool 이다. true 혹은 false 를 반환해주니, console.log 해준뒤 스크롤해보면, 해당 엘리먼트의 보여지는 상태에 따라 출력값이 달라질 것이다.

You may also like...