Intersection Observer API를 활용하여 carousel indicator(dot) 만들기 -1-

Intersection Observer 홈페이지에 적용하기.

현재 블로그 상태이다.

자기소개페이지(100vh), 스킬페이지(100vh), 작업물페이지(150vh)로 이루어진 자기소개 페이지

현재 블로그는 scroll-snap을 이용하여 한 페이지(내용이 달라지는 부분마다 페이지로 구분)씩 스크롤 되게 되어있다. 여기서 스크롤을 내렸을 때 현재 스크롤의 위치가 어디인지 알려주고, 클릭 시 이동할 수 있는 Indicator를 우측에 제작할 예정이다.

 

이 과정에서 현재 index를 Intersection Observer를 통해 받아오고, 이를 활용해서 indicator의 색상변환/애니메이션 활성화 등을 할 수 있는 구조를 만들 계획이다.

observer를 통해 현재 인덱스 값을 받아오는 구조를 먼저 만들어 보도록 하겠다.

Intersection Observer 등록

가장먼저 할 일은 Intersection Observer를 만드는 일이다.

    let option = { threshold: 1.0 }

    var observer = new IntersectionObserver((entries, observer)=>{

        //함수 구현 내용

    }, option);

    $(".scroll-area").each(function(){

        observer.observe(this);

    })

이렇게 함으로써 scroll-area class를 갖는 모든 요소들에 대해 특정 요소가 viewport에 완전히 드러났을 때, callback 함수를 실행 할 수 있게 된다.

 

 

Intersection Observer Entry를 이용하여 인덱스 값 얻기.

다음으로 해야 할 일은 callback이 발생했을 때, entry를 이용하여 현재 인덱스 값을 반환하는 과정이다. 이 과정에서 entries.target을 활용하면, 해당 element를 직접 받을 수 있다.

var observer = new IntersectionObserver((entries, observer)=>{

        entries.forEach(entry=>{

            //활성화 되지 않은 entry가 들어오게 되는 상황의 예외처리

            if(!entry.isIntersecting){

                return;

            }

            currentPageIndex = $(entry.target).index();

            console.log(currentPageIndex);

        })

    }, option);

    $(".scroll-area").each(function(){

        observer.observe(this);

    })

※ 필자는 scroll-snap을 통해 반드시 하나의 element만 entries에 들어온다는 것이 확실한 상황이다. 따라서 element를 여러개 관측되게 하기 위해서는 다른 방식을 사용해야한다.

1,2 페이지의 인덱스는 정상적으로 출력이 되나, 3페이지는 threshold가 1에 미치치 못해서 인덱스2가 출력되지 않는 모습

3개의 scroll-area class 의 div 중 마지막 하나의 div는 높이가 150vh로 설정되어있어서 threshold가 1.0이면 절대 값을 받을 수 없게 되었다.

이 문제를 해결하기 위해서 scroll-snap의 mandatory 속성이 다음 엘리먼트로 스크롤을 시작하는 정도인 40% 정도를 기준으로 삼아서 threshold를 0.4로 변경해줬다.

 

다음시간에는 이 인덱스 값을 이용해서 현재 스크롤 위치를 알려주는 인디케이터를 만들어보도록 하겠다.