scrollLoop 함수 질문

애플 웹사이트 인터랙션 클론!

현재 활성시킬 씬 결정하기

작성

383

  const scrollLoop = () => {
    prevScroll = 0; // 스크롤값이 다시 0으로 시작하게

    for (let i = 0; i < current; i++) {
      prevScroll += sceneInfo[i].scrollHeight;
    }

	console.log('prev', prevScroll)

    if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) {
      current++;
	  alert()
    }

	console.log('next', prevScroll)


    if (currentScroll < prevScroll) {
      current--;
    }

  };

선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜

  if (currentScroll > prevScroll) {
      current++;
	  alert()
    }

조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...

HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩

답변 2

1분코딩

지식공유자

for (let i = 0; i < current; i++) {
  prevScroll += sceneInfo[i].scrollHeight;
}

여기까지는 현재 scene 직전 씬들의 총 높이를 합친거고요,




if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) {
  current++;
}

여기서 이전 scene까지의 총 높이에 현재 scene의 높이까지 더해서
다음 scene으로 넘어갔는지는 최종적으로 판단하는 거랍니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

scrollLoop 함수에서 prevScroll 변수는 이전에 스크롤한 값을 저장하는 역할을 합니다. for문에서는 이전 스크롤 값(prevScroll)에 현재 섹션 높이(sceneInfo[i].scrollHeight)를 더해줘서 다음 섹션의 시작점을 계산합니다.

그리고 if문에서는 현재 스크롤 값(currentScroll)이 다음 섹션의 시작점(prevScroll + sceneInfo[current].scrollHeight)보다 크면 다음 섹션으로 이동하게됩니다. 그리고 반대로 현재 스크롤 값이 이전 섹션의 끝점(prevScroll)보다 작으면 이전 섹션으로 이동하게 됩니다.

따라서, if(currentScroll > prevScroll) 조건문에는 prevScroll 변수가 이미 for문에서 더해진 이전 섹션의 끝점 값이 저장되어 있습니다. 따라서 이 조건문에서 prevScroll 변수를 더해줄 필요가 없습니다. 이전 섹션 끝점(prevScroll)과 현재 섹션 끝점(prevScroll + sceneInfo[current].scrollHeight)을 비교하기 위해 각각 변수에 저장된 값을 그대로 사용하면 됩니다.

즉, if(currentScroll > prevScroll + sceneInfo[current].scrollHeight)와 같이 현재 섹션 끝점을 계산하는 부분에서 prevScroll 변수가 더해진 값을 사용하고, if(currentScroll < prevScroll)와 같이 이전 섹션 끝점을 계산하는 부분에서 prevScroll 변수를 그대로 사용하면 제대로 작동할 것입니다.

마지막으로, scrollLoop 함수에 alert() 함수를 써놓으셨는데, 이는 디버깅을 위한 것으로 현재 어떤 섹션에서 스크롤 중인지 확인하기 위한 용도로 사용하신 것이라면 괜찮습니다. 하지만 실제로 서비스에서는 alert() 함수를 사용하면 사용자 경험에 좋지 않을 수 있습니다. 따라서, alert() 함수는 개발 완료 후 반드시 지워주시는 것이 좋습니다.

좋은 하루 보내세요!

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

scrollLoop 함수 질문