[자바스크립트] 요소가 뷰포트 안에 있는지 확인하기

들어가기에 앞서, 뷰포트에 대해 설명하자면

위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다.

이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다.

$.fn.isvisible = function() {
  var a = $(this).offset().top,
      b = a + $(this).outerHeight(),
      c = $(window).scrollTop(),
      d = c + $(window).height();
 
  return b > c && a < d
};

스크롤을 위에서 아래로 내리건 아래에서 위로 올리건 요소가 뷰포트 내부에 있는지 계속 확인하려면 위 방법을 사용하시면 됩니다.

$.fn.isvisible = function() {
  var a = $(this).offset().top - $(window).height(),
      b = $(window).scrollTop();
 
  return b >= a
};

스크롤을 위에서 아래로 내리는 경우만 생각하면 위처럼 조금 더 짧은 스크립트를 이용하셔도 됩니다.

이제, 상술한 스크립트를 활용할 시간입니다.

$(window).on('resize scroll', function() {
  if ($("#elem").isvisible()) {
    //do something
  }
  else {
    //do something
  }
});

위와 같은 방법으로 사용하시면 됩니다.

function reveal_image() {
  $(".imageblock>img").each(function() {
    if ($(this).isvisible()) {
      $(this).addClass("reveal")
    } else {
      $(this).removeClass("reveal")
    }
  })
}
 
$(window).on('resize scroll', function() {
  reveal_image()
}),
$(document).ready(function() {
  reveal_image()
});

티스토리에 한해, 위와 같은 스크립트와 함께 이용해 이미지가 뷰포트에 들어오면 애니메이션과 함께 드러나도록 할 수도 있습니다.

예시