20220603

intersectionObserver

대상 요소와 상위 요소, 또는 대상 요소와 최상의 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지.

const observerItem = new IntersectionObserver(observerFnc,option)

new IntersectionObserver() : observer 초기화, 관찰할 대상 지정.
생성자는 2개의 인수(callback, options)를 가짐.

entries

isIntersecting : 관찰 대상의 교차 상태. 바운딩 박스와 교차하면 true 바운딩 박스와 교차하지 않으면 false로 반환함.

option

const option = {
            root : boxwrap,
            rootmargin : '0px',
            threshold : '0.8',
        }

1.root : 교차영역 계산에 사용하는 바운딩 박스의 기준이 되는 element 또는 document. root설정을 지정하지 않는 경우 최상위 문서의 뷰포트를 루트로 사용함.

2.rootmargin : 필요에 따라 루트 영역을 늘리거나 줄일 때 사용.
ex) 무한 루프 시킬때 영역 들어오기 전에 미리 세팅하고 준비하도록 하고싶으면 마진을잡아서 적용되는 영역을 넓힘.

3.threshold :요소가 어느정도 비율로 교차했을떄 인식하게 할것인지. 진입할때 0.8이면 0.2나갔을 때 교차에서 벗어났다고 인식함.

예제

    const section = document.querySelectorAll('.section');
    const li = document.querySelectorAll('.gnb li')
    const observerFnc = (entries) => {
      console.log(entries)
      entries.forEach((ele)=>{
        const index = ele.target.dataset.index;
        li.forEach(ele=>ele.classList.remove('on'))
        li[index].classList.add('on');
        if(ele.isIntersecting){
          ele.target.classList.add('active')
        }
        else{
          ele.target.classList.remove('active')
        }
      })//foreach
    }
    const option = {
      threshold : 0.6
    }
    const observerObject = new IntersectionObserver(observerFnc,option)
    section.forEach(selectionItem => observerObject.observe(selectionItem))