IntersectionObserver()

const callback = (entries, observer) => {
    console.log("observe!!!");
}

'원하는 요소가 특정 영역으로 들어왔을 때 알려주는 콜백함수'를 알려주는 관찰자

 

IntersectionObserver(callback, options)

 

이때 callback 함수는 호출될 때 entries와 observer를 인자로써 전달한다.

 

entries와 observer는 그대로 사용하는 것임

우측 사선으로 갈수록 수가 커진다. (화면에서 벗어날 수록 -라는 뜻)

 

 

콘솔창에 찍히는 entries, observer

1. 박스가 화면에 전부 들어와 있다면 intersectionRatio는 1, 90%면 0.9

2. isIntersecting => 화면으로 들어오고 있으면 true, 나가면 false

 

---

<option>

root: null
-> 따로 설정하지 않으면 그냥 viewport임 (보이는 화면)

rootMargin: '0px'
-> 보이는 화면을 넘어서, 설정값 만큼 더 포함하는 것

그러니까... 스크롤 내릴때 이미 보라색으로 변해서 내려오는 거 =>  rootMargin에서 이미 보라색으로 전환됐기 때문

 

사용자가 보기전에 사전에 준비해두는 것으로 이해해도 좋을듯

-> 예제로 치면 스크롤이 근접한 경우에 이미지를 먼저 로딩해둔다. 라는 느낌

      threshold: 1

      -> 전체가 화면에 들어왔을 때 처리하겠다
      -> 들어올땐 박스 전체가 화면으로 들어와야만 콜백함수가 수행되지만
      -> 나갈때는 조금이라도 나가면 콜백함수가 수행된다. (1 - 1)

  

       다른 예) 0.2일 때 20%만 들어와도 콜백함수 실행 그렇지만 나갈땐 80%가 나가야만 콜백함수 실행