• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

스크롤이 적용이 안되는것같아요!ㅜㅜ

22.07.01 20:48 작성 조회수 207

0

스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당

const main = () => {

    let y0ffset = 0;

    const sceneInfo = [
        {
            //0
            type: 'sticky',
            heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅
            scrollHeight: 0, 
            objs: {
                container: document.querySelector('#scroll-section-0')
            }
        },
        {
            //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.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() {
        
        
    }

    window.addEventListener('resize',setLayout);
    window.addEventListener('scroll',() => { 
        y0ffset = window.pageXOffset;
        scrollLoop();
    });

    setLayout();



};


main();

답변 1

답변을 작성해보세요.

0

아직 처음 각 섹션의 높이를 설정하는 부분(setLayout)까지만 코딩을 하셨어요~
스크롤 부분은 이벤트만 바인딩을 한 상태고, 아직 아무것도 코딩이 안되었기 때문에 적용이 안되는 것이랍니다.
진도대로 나가시면 됩니다.