IntersectionObserver 기능 살펴보기

IntersectionObserver 기능을 살펴보자.

<div class="content" id="content1">
    <span>콘텐츠1</span>
  </div>
  <div class="content" id="content2">
    <span>콘텐츠2</span>
  </div>
  <div class="content" id="content3">
    <span>콘텐츠3</span>
  </div>
  <div class="content" id="content4">
    <span>콘텐츠4</span>
  </div>
  <div class="content" id="content5">
    <span>콘텐츠5</span>
  </div>

  *{margin:0; padding:0;}
  
    .content{
      border:1px solid #000;
      height:100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }
    .visible {
      background-color: #000;
      color:#fff;
    }

step 1 >

const observer = new IntersectionObserver(()=>{
    console.log('hello');
  });

  const $content = document.querySelector('#content3')
  observer.observe($content)

1. 감지될 요소를 변수로잡고 new IntersectionObserver 를 생성해준뒤 콜백함수안에 실행할 요소를 넣는다.

2. observer.observe(감지될요소)

step 2 >

const observer = new IntersectionObserver((entries)=>{
    if(entries[0].isIntersecting){
      console.log('hello');
    }
  });

  const $content = document.querySelector('#content3')
  observer.observe($content)

entries 매개변수를 넣어주고.
if문을 이용해 .isIntersecting로 보일때 실행할 요소를 넣어준다.

step 3 >

const observer = new IntersectionObserver((entries)=>{
    if(entries[0].isIntersecting){
      console.log('hello');
      entries[0].target.classList.add('visible');
    }else{
      entries[0].target.classList.remove('visible');
    }
  });

  const $content = document.querySelector('#content3')
  observer.observe($content)

화면에 보일때 entries[0].target.classList.add('visible');
안보일때 entries[0].target.classList.remove('visible');

step 4 >

const options = {
    threshold:.5
  }
  const observer = new IntersectionObserver((entries)=>{
    if(entries[0].isIntersecting){
      entries[0].target.classList.add('visible');
    }else{
      entries[0].target.classList.remove('visible');
    }
  }, options);

  const $content = document.querySelector('#content3')
  observer.observe($content)

IntersectionObserver 콜백함수에 options 를 추가하고 threshold를 이용하여 .5 (절반쯤) 왔을때 실행되도록 한다.

step 5 >

여러개 작동 시키기 ( forEach )

const options = {
    threshold:.5
  }
  const observer = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
      if(entry.isIntersecting){
        entry.target.classList.add('visible');
      }else{
        entry.target.classList.remove('visible');
      }
    })
  }, options);

  const list = document.querySelectorAll('.content')
  list.forEach(o=>observer.observe(o))

각 content 태그를 forEach로 가져오고

IntersectionObserver 의 매개변수인 entries도 forEach로 가져와서
isIntersecting 을 if 문을 사용해 클래스를 넣고제거 해준다.