Inflearn-BBC

(() => {

    const stepElems = document.querySelectorAll('.step'); //말풍선
    const graphicElems = document.querySelectorAll('.graphic-item'); //그림
    let currentItem = graphicElems[0]; //현재 활성화된(visible클래스가 붙은) .graphic-item을 지정

    for (let i = 0; i < stepElems.length; i++) {
        //stepElems[i].setAttribute('data-index', i);
        stepElems[i].dataset.index = i; //html속성으로 data-index준거랑 같음
        graphicElems[i].dataset.index = i;
    }

    function activate() {
        currentItem.classList.add('visible');
    }

    function inactivate() {
        currentItem.classList.remove('visible'); //currentItem에 visible붙은 애가 활성화 되어있으면 remove하시요
    }

    window.addEventListener('scroll', () => {
        let step;
        let boundingRect;

        for (let i = 0; i < stepElems.length; i++){
            step = stepElems[i];
            boundingRect = step.getBoundingClientRect();
             //말풍선 위치를 찍는당
            
            if (boundingRect.top > window.innerHeight * 0.1 &&
                boundingRect.top < window.innerHeight * 0.8) {
                    inactivate();
                    currentItem = graphicElems[step.dataset.index];
                    activate();
                }
        }
    });

    activate();

}) ();코드를 입력하세요
```(() => {

    const stepElems = document.querySelectorAll('.step'); //말풍선
    const graphicElems = document.querySelectorAll('.graphic-item'); //그림
    let currentItem = graphicElems[0]; //현재 활성화된(visible클래스가 붙은) .graphic-item을 지정

    for (let i = 0; i < stepElems.length; i++) {
        //stepElems[i].setAttribute('data-index', i);
        stepElems[i].dataset.index = i; //html속성으로 data-index준거랑 같음
        graphicElems[i].dataset.index = i;
    }

    function activate() {
        currentItem.classList.add('visible');
    }

    function inactivate() {
        currentItem.classList.remove('visible'); //currentItem에 visible붙은 애가 활성화 되어있으면 remove하시요
    }

    window.addEventListener('scroll', () => {
        let step;
        let boundingRect;

        for (let i = 0; i < stepElems.length; i++){
            step = stepElems[i];
            boundingRect = step.getBoundingClientRect();
             //말풍선 위치를 찍는당
            
            if (boundingRect.top > window.innerHeight * 0.1 &&
                boundingRect.top < window.innerHeight * 0.8) {
                    inactivate();
                    currentItem = graphicElems[step.dataset.index];
                    activate();
                }
        }
    });

    activate();

}) ();

<loop적게 돌게하기-step개수가 많아져도>
※Intersection observer: 어떠한 요소가 눈에 보이는지 안보이는지 체크 가능(for문 줄이기 위해서 사용)-기능 多(참고: heropy.blog)
-> 관찰하는 대상들이 나타나거나 사라지는 그 시점마다 callback함수가 실행된다

여기선 총 3개(위아래 말풍선, 그림)만 체크해주면 안전하게 잘 돌아간다..
우리는 이중 target(div.step)을 사용할 것이다.

(() => {

    const stepElems = document.querySelectorAll('.step'); //말풍선
    const graphicElems = document.querySelectorAll('.graphic-item'); //그림
    let currentItem = graphicElems[0]; //현재 활성화된(visible클래스가 붙은) .graphic-item을 지정
    let ioIndex;

    const io = new IntersectionObserver((entries, observer) => { //io 라는 변수를 통해서 observe관찰 시킴
        ioIndex = entries[0].target.dataset.index * 1; //index는 숫자로 바꾸기(문자열->숫자: * 1)
    });

    for (let i = 0; i < stepElems.length; i++) {
        io.observe(stepElems[i]);//모든 stepElems가 관찰 대상으로 등록 된다
        //stepElems[i].setAttribute('data-index', i);
        stepElems[i].dataset.index = i; //html속성으로 data-index준거랑 같음
        graphicElems[i].dataset.index = i;
    }

    function activate() {
        currentItem.classList.add('visible');
    }

    function inactivate() {
        currentItem.classList.remove('visible'); //currentItem에 visible붙은 애가 활성화 되어있으면 remove하시요
    }

    window.addEventListener('scroll', () => {
        let step;
        let boundingRect;


        //for (let i = 0; i < stepElems.length; i++){
        for (let i =  ioIndex - 1; i < ioIndex + 2; i++){  // 현재 실행중인 observer의 전꺼랑 다음꺼만 검사를 해주는 것
            step = stepElems[i];
            if(!step) continue; //step에 값이 없다면 그냥 밑에꺼 하세여
            boundingRect = step.getBoundingClientRect();
             //말풍선 위치를 찍는당
    

            if (boundingRect.top > window.innerHeight * 0.1 &&
                boundingRect.top < window.innerHeight * 0.8) {
                    inactivate();
                    currentItem = graphicElems[step.dataset.index];
                    activate();
                }
        }
    });
}) ();

target이라는 변수 사용
현재 index의 전후만 체크해준다