스크롤 영역이 이상하게 잡히고 스크롤 길이도 이상해졌는데 어디서 ... - 인프런

잘 따라가고 있었는데 어디서부터인가 꼬여서 오류가 나네요... 선생님이 하신 소스코드 비교하면서 봤는데 제 눈에 오타나 오류가 안 보여서 질문 남깁니다 ㅠㅠ
(()=>{

    let yOffset = 0; //window.pageYOffset 대신 쓸 변수
    let prevScrollHeight = 0; //현재 스크롤 위치 (yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이의 합
    let currentScene = 0; //현재 활성화된(눈 앞에 보고 있는) 씬(scroll-section)

    const sceneInfo = [
        {
            //0
            type: 'sticky',
            heightNum: 5,        //브라우저 높이의 5배로 srollHeight 세팅
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-0'),
                messageA: document.querySelector('#scroll-section-0.main-message.a'),
                messageB: document.querySelector('#scroll-section-0.main-message.b'),
                messageC: document.querySelector('#scroll-section-0.main-message.c'),
                messageD: document.querySelector('#scroll-section-0.main-message.d')
            },
            values:{
                messageA_opacity:[0, 1]
            }

        },
        {
            //1
            type: 'normal',
            heightNum: 5,        
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-1')
            }

        },
        {
            //2
            type: 'sticky',
            heightNum: 5,        
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-2')
            }

        },
        {
            //3
            type: 'sticky',
            heightNum: 5,        
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-3')
            }

        }
    ];

    
    function setLayout(){
        //각 스크롤 섹션의 높이 세팅
        for(let i = 0; i < sceneInfo.lenght; i++) {
            sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
            sceneInfo[i].objs.container.style.height =`${scrollHeight[i].scrollHeight}px`;
        }

        yOffset = window.pageYOffset;
        
        let totalScrollHeight = 0;
        for (let i = 0; i < sceneInfo.length; i++){
            totalScrollHeight += sceneInfo[i].scrollHeight;
            if(totalScrollHeight >= yOffset){
                currentScene = i;
                break;
            }
        }
        document.body.setAttribute ('id', `show-scene-${currentScene}`);
    }

    function playAnimation(){
        switch (currentScene){
            case 0:
                console.log('0 play');
                break;
            case 1:
                console.log('1 play');
                break;
            case 2:
                console.log('2 play');
                break;
            case 3:
                console.log('3 play');
                break;
        }
    }
    function scrollLoop(){
        prevScrollHeight = 0;
        
        for(let i = 0; i < currentScene; i++) {
            prevScrollHeight += sceneInfo[i].scrollHeight;
        }

        
        if(yOffset < prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
            currentScene++;
            document.body.setAttribute ('id', `show-scene-${currentScene}`);
        }

        if (yOffset > prevScrollHeight){
            if (currentScene === 0) return; //브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)
            currentScene--;
            document.body.setAttribute ('id', `show-scene-${currentScene}`);
        }

        playAnimation();
        
    }
    
    window.addEventListener('scroll', () => {
        yOffset = window.pageYOffset;
        scrollLoop();
    })
    //window.addEventListener('DOMContentLoaded', setLayout);
    window.addEventListener('load', setLayout);
    window.addEventListener('resize', setLayout);
    setLayout();


})();
//같은 말: (function())();
인프런 커뮤니티 질문&답변

스크롤 영역이 이상하게 잡히고 스크롤 길이도 이상해졌는데 어디서 오류가 난 건지 알고 싶습니다
