pageYOffset 관련 질문 및 이해

Question

안녕하세요 강의중 이해가 잘 된게 맞는지 의문이 들어 질문드립니다. 1. pageYOffset 이 현재 스크롤 된 위치가 맞나요? 2. delayedYOffset = delayedYOffset + (pageYOffset - delayedYOffset) * 0.1 의 0.1 은 pageYOffset의 값을 1/10 한 건가요?.. pageYOffset은 실제 스크롤 된 위치라면 delayedYOffset 은 실제 스크롤된 위치의 1/10 된 위치가 맞는건가요? 이 부분이 이해가 잘 안가내요.

1분코딩 · Answer

pageYOffset: 목표 위치(현재 스크롤 픽셀값) delayedYOffset: 현재 위치 영상에서 그림으로 설명하는 부분을 보시면 되는데요, 일단 pageYOffset이 목표 위치, delayedYOffset이 현재 위치라는걸 이해하시면 됩니다. 목표 위치에서 현재 위치를 빼면 위치의 차이를 구할 수 있고, 위치의 차이에 0.1을 곱해서(10으로 나누어도 되고요) 위치 차이의 1/10만큼씩 이동시켜주는거지요~ 예를들어 목표 위치가 500이고 현재 위치가 0 이라면, 현재 위치 + (목표 위치 - 현재 위치)*0.1 이 식을 이용해서.. 첫번째 이동은 0 + (500 - 0)*0.1 이므로 현재 위치는 50 (이전 위치에서 50만큼 이동) 두번째 이동은 50 + (500 - 50)*0.1 이므로 현재 위치는 95 (이전 위치에서 45만큼 이동) 세번째 이동은 95 + (500 - 95)*0.1 이므로 현재 위치는 135.5 (이전 위치에서 40.5만큼 이동) 이런 식으로 이동량이 점점 줄어들면서 서서히 감속을 하는 원리랍니다. 그림으로 보는게 이해하기가 더 수월하기 때문에, 영상에서 그림으로 설명하는 부분을 반복해서 보시는 것도 좋을 것 같습니다^^