-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
pageYOffset 관련 질문 및 이해
22.03.13 17:44 작성 조회수 265
0
안녕하세요 강의중 이해가 잘 된게 맞는지 의문이 들어 질문드립니다.
1. pageYOffset 이 현재 스크롤 된 위치가 맞나요?
2. delayedYOffset = delayedYOffset + (pageYOffset - delayedYOffset) * 0.1 의
0.1 은 pageYOffset의 값을 1/10 한 건가요?..
pageYOffset은 실제 스크롤 된 위치라면
delayedYOffset 은 실제 스크롤된 위치의 1/10 된 위치가 맞는건가요?
이 부분이 이해가 잘 안가내요.
답변을 작성해보세요.
0
1분코딩
지식공유자2022.03.16
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만큼 이동)
이런 식으로 이동량이 점점 줄어들면서 서서히 감속을 하는 원리랍니다.
그림으로 보는게 이해하기가 더 수월하기 때문에, 영상에서 그림으로 설명하는 부분을 반복해서 보시는 것도 좋을 것 같습니다^^
답변 1