• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

scene 번호가 안찍혀요~ 현재 활성화시킬 신 결정하기에서 문제가 생겼내요. console에 0이라고만 뜹니다.

20.06.09 22:34 작성 조회수 109

0

(() => {
    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,
            objs:{
                container:document.querySelector('#scroll-section-0')
            }
        },
        {
            // 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`
        }
        console.log(sceneInfo)
    }
    function scrollLoop(){
        prevScrollHeight=0;
        for (let i=0; i<currentScene; i++){
            prevScrollHeight += sceneInfo[i].scrollHeight;
        }        
        if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){
            currentScene++;
        }
        if(yOffset < prevScrollHeight) {
            if(currentScene === 0) return;
            currentScene--;
        }
        console.log(currentScene);
    }
    window.addEventListener('resize',setLayout);
    window.addEventListener('scroll', () =>{
        yOffset=(window.pageyOffset);
        scrollLoop();
    })
    setLayout();
})()


답변 1

답변을 작성해보세요.

1

73번째줄에,
pageyOffset를 pageYOffset으로 고쳐주세요~
대소문자 오타가 있어서 값이 undefined로 나와서 인식이 안되는 문제였습니다^^