개념/ IntersectionObserver

스크롤을 하는 방법

IntersectionObserver없이

height를 적당히 잡고 scroll event를 받아서 scroll될때마다 heigth조건을 계속검사해주면서 페이지를 내린다
단점 : 계속 검사해야함 , 브라우저마다 오차발생

new IntersectionObserver()
div태그가 현재 화면에 보이는지 파악쉬움

  <script>
  let observer = new IntersectionObserver(() => {});
  observer.observe()
    
    
  </script>

observer.observe() => ()안에 있는 html요소가 화면에 등장하는지 감시해줌

  <script>
      let div = document.querySelectorAll("div");
      let observer = new IntersectionObserver((e) => {
        e.forEach((item) => {
          if (item.isIntersecting) {
            item.target.style.opacity = 1;
            item.target.style.transform = "rotate(0deg)";
          } else {
            item.target.style.opacity = 0;
          }
        });
      });
      observer.observe(div[0]);
      observer.observe(div[1]);
      observer.observe(div[2]);
      observer.observe(div[3]);
  </script>

item.isIntersecting
아이템이 화면에 보이는여부를 체크해서 true, false로 반환

참고자료
코딩애플 유튜브영상
네이버블로그