scrollLoop 함수 질문
475
26 câu hỏi đã được viết
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()
}조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
Câu trả lời 2
0
for (let i = 0; i < current; i++) {
prevScroll += sceneInfo[i].scrollHeight;
}
여기까지는 현재 scene 직전 씬들의 총 높이를 합친거고요,
if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) {
current++;
}
여기서 이전 scene까지의 총 높이에 현재 scene의 높이까지 더해서
다음 scene으로 넘어갔는지는 최종적으로 판단하는 거랍니다.0
안녕하세요, 인프런 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() 함수는 개발 완료 후 반드시 지워주시는 것이 좋습니다.
좋은 하루 보내세요!
이미지 배경 문의
0
65
1
[크로스브라우징] safari에서 동영상 영역 미노출
0
106
1
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
0
109
2
vue강의는안하시나요?!
0
100
1
스크롤 속도에 따른 messageA_opacity_out
0
115
1
drawImage(objs.videoImages[sequence], 0, 0); error
0
88
1
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
0
126
0
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
0
206
1
React에서 load 상태를 어떻게 감지할 수 있을까요?
0
678
1
[섹션7-3: 버그수정 2] tempYOffset 오류
0
194
1
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
0
312
2
게속 오류떠서 글 작성해봐요....
0
505
2
Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?
1
488
1
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
0
455
2
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
0
451
2
페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다
0
430
1
섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.
0
533
1
원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?
0
593
2
라이브러리 질문
1
412
2
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
0
409
1
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
0
596
2
도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ
0
1233
2
load 이벤트시 첫 비디오 이미지가 뜨네요.
0
504
2
마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?
0
1019
2