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

Question

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

1분코딩 · Answer

setLayout 함수에 오타가 좀 있네요~ 잘못쓰신 부분은 주석처리 해두었으니, 함수를 비교해보세요. // for(let i = 0; i < sceneInfo.lenght; i++) { for(let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; // sceneInfo[i].objs.container.style.height =`${scrollHeight[i].scrollHeight}px`; sceneInfo[i].objs.container.style.height =`${sceneInfo[i].scrollHeight}px`; }