인프런 커뮤니티 질문&답변

안녕하세요 평소 배우고 싶은 강의가 딱 있어 재미있게 듣는 과정 중에 오류가 발생하였습니다.

(() => {

 

    let yOffset = 0; // window.pageYOffset 대신 쓸 변수

    let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합

    let currentScene = 0; // 현재 활성화된(눈 앞에 보고있는) scroll-section

 

    const sceneInfo = [

        {   //0

            type: 'sticky',

            heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅

            scrollHeight: 0,

            //scroll-section id를 바로 가져와서 사용할수 있게 객체화 시킨다.

            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: {

                //opacity와 transform 함수를 사용 하여 변화를 준다

                //전체 범위(700)

                messageA_opacity: [0, 1]

            }

        },

        {   //1

            type: 'normal',

            heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅

            scrollHeight: 0,

            objs: {

                container: document.querySelector('#scroll-section-1')

            }

        },

        {   //2

            type: 'sticky',

            heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅

            scrollHeight: 0,

            objs: {

                container: document.querySelector('#scroll-section-2')

            }

        },

        {   //3

            type: 'sticky',

            heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅

            scrollHeight: 0,

            objs: {

                container: document.querySelector('#scroll-section-3')

            }

        }

    ];

 

    function setLayout() {

        //각 스크롤 섹션의 높이 세팅

        for (let i = 0; i < sceneInfo.length; i++) {

            sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;

            sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;

        }

        // 새로고침 할때도 동일한 currentscene 표시

        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 calcValues(values, currentYOffset) {

        let rv;

        // 현재 scene(scroll-section)에서 스크롤된 범위를 비율로 구하기

        // 현재 scroll된 길이를 현재 scene의 높이를 나눠주면 비율을 구할수있다.

        let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight;

 

        rv = scrollRatio * (values[1] - values[0]) + values[0];

 

        return rv;

    }

    function playAnimation() {

        const objs = sceneInfo[currentScene].objs;

        const values = sceneInfo[currentScene].values;

        const currentYOffset = yOffset - prevScrollHeight;

 

        // console.log(currentScene,currentYOffset);

        switch (currentScene) {

            case 0:

                // console.log('0 play');

                let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset);

                // console.log(messageA_opacity_0,messageA_opacity_1);

                // console.log(currentYOffset);

                // console.log( calcValues(values.messageA_opacity,currentYOffset) );

                // console.log(messageA_opacity_in);

                // console.log(messageA_opacity_in);

                objs.messageA.style.opacity = messageA_opacity_in;

                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();

        //document.body.setAttribute('id', `show-scene-${currentScene}`);

    }

 

    window.addEventListener('scroll', () => {

        yOffset = window.pageYOffset;

        scrollLoop();

    });

 

    // load는 앞에 과정 모두 로드 한후 실행, DOM은 관련 로직만 실행되면 바로 실행

    window.addEventListener('load', setLayout);

    window.addEventListener('resize', setLayout);

})();

지금 이 과정까지 소스코드를 작성하고 확인하는데 opacity를 확인하려는데 계속 Uncaught TypeError: Cannot read property 'style' of null 오류가 발생하네요 영상 여러번 돌려보면서 확인 해보왔는데도 오류가 뜨네요 참고로 HTML부분 Class도         <div class="sticky-elem main-message a">

            <p>온전히 빠져들게 하는<br>최고급 세라믹</p>

        </div>

        <div class="sticky-elem main-message b">

            <p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p>

        </div>

        <div class="sticky-elem main-message c">

            <p>온종일 편안한<br>맞춤형 손잡이</p>

        </div>

        <div class="sticky-elem main-message d">

           <p>새롭게 입가를<br>찾아온 매혹</p>

        </div>

강의와 같이 수정하였습니다.

꼭 제발 도움좀 부탁드립니다. ㅠㅠ