[javascript] 스크롤 시, 화면에 보여지는 요소에 클래스 추가

어떨 때 쓰면 좋을까

• Image Lasy loading 구현할 때
• Content Lasy loading 구현할 때
• Infinite scrolling 구현할 때
• 화면에 보이는 요소 에니메이션 처리할 때

 

구문

const observer = new IntersectionObserver(callback, options);

 

메서드

observe, unobserve, disconnect 메서드를 주로 사용하게 된다.

• observe(targetElement): 타겟 엘리먼트에 대한 관찰을 시작할 때 사용합니다.
• unobserve(targetElement): 타겟 엘리먼트에 대한 관찰을 멈출 때 사용합니다.
• disconnect(): 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰을 멈추고 싶을 때 사용합니다.
• takeRecords(): 관찰중인 엘리먼트의 IntersectionObserverEntry 객체를 배열로 반환한다.

옵션 속성

저버를 조정할 수 있는 옵션 객체로 위 구문의 options에 기입합니다.
지금은 이런 내용이 있다 정도만 알아두고, 자세히 다뤄보고자 할 때 다시 봐도 늦지 않는다.

• root
  • 대상 요소 (element) 를 감시할 상위 요소.
  • default: null (document가 root로 사용된다)
• rootMargin
  • 바깥 여백(Margin)을 이용해 Root 범위를 확장하거나 축소할 수 있습니다.
  • default: 0px 0px 0px 0px
• threshold
  • 관측 대상이 화면에 어느 정도 노출될때 보인다고 판단할지 비율을 지정할 수 있다. (0.0 ~ 1.0 지정 가능하고, 0.0은 관측 대상이 1픽셀이라도 보이면, 1.0은 요소가 전부 보일때 노출됬다고 판단한다)
  • default: 0.0

 

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    const $target = e.target;

    // 화면에 노출 상태에 따라 해당 엘리먼트의 class를 컨트롤
    if (e.isIntersecting) {
      $target.classList.add("show");
    } else {
      $target.classList.remove("show");
    }
  });
});

// 옵저버할 대상을 선택하여 관찰 시작
const $items = document.querySelectorAll("div");
$items.forEach((item) => {
  io.observe(item);
});

// 특정 요소만 옵저버를 해제
// io.unobserve(target);

// 옵저버 전체를 해제
// io.disconnect();