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

아, 저도 미처 발견하지 못했던 문제네요!
loop 함수를 아래와 같이 업데이트 해보세요~
// 추가코드
이렇게 주석으로 설명 달아두었습니다.

해당 부분은 다른 분들도 아시면 좋을 것 같아서,
추후에 설명영상 업데이트하고 공지하도록 하겠습니다^^

function loop() {
	delayedYOffset = delayedYOffset + (yOffset - delayedYOffset) * acc;

	if (!enterNewScene) {
		if (currentScene === 0 || currentScene === 2) {
			const currentYOffset = delayedYOffset - prevScrollHeight;
			const objs = sceneInfo[currentScene].objs;
			const values = sceneInfo[currentScene].values;
			let sequence = Math.round(calcValues(values.imageSequence, currentYOffset));
			if (objs.videoImages[sequence]) {
				objs.context.drawImage(objs.videoImages[sequence], 0, 0);
			}
		}
	}

        // 추가 코드
        // home이나 end를 이용해 페이지 끝으로 고속 이동하면 body id가 제대로 인식 안되는 경우를 해결
        // home 키로 페이지 맨 위로 갈 경우: scrollLoop와 첫 scene의 기본 캔버스 그리기 수행
        if (delayedYOffset < 1) {
            scrollLoop();
            sceneInfo[0].objs.canvas.style.opacity = 1;
            sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0);
        }
        // end 키로 페이지 맨 아래로 갈 경우: 마지막 섹션은 스크롤 계산으로 위치 및 크기를 결정해야할 요소들이 많아서 1픽셀을 움직여주는 것으로 해결
        if ((document.body.offsetHeight - window.innerHeight) - delayedYOffset < 1) {
            let tempYOffset = yOffset;
            scrollTo(0, tempYOffset - 1);
        }

	rafId = requestAnimationFrame(loop);

	if (Math.abs(yOffset - delayedYOffset) < 1) {
		cancelAnimationFrame(rafId);
		rafState = false;
	}
}