• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문

23.04.27 11:30 작성 조회수 424

0

안녕하세요

강사님

이해가 되지 않아서 질문드립니다.

저는 조건을 한글로 생각해서

저렇게 주석으로 정리를 해놨습니다.

if문의 조건을 봤을땐 조건이 맞아서 console.log에 scroll 라는 변수도 정상적으로 찍힙니다.

제가 궁금한것은

2개의 조건이 스크롤 할때마다 맞는데 어떻게

스크롤 값이 526 이 되거나 넘어가면 pageNum의 값이 증가하는걸까요?

많이 헷갈려서 이부분만 여러번 보는듯합니다.

아니면 저의 해석이 잘못된 걸까요?

// 1. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 보다 큰가? = 스크롤의 값이 -250보다 큰가?
// 2. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 + sectionNum의 전체 높이 값 보다 작은가? = 스크롤의 값이 526 보다 작은가?

 

 

for(let i = 0; i < maxNum; i++){

                // 1. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 보다 큰가? = 스크롤의 값이 -250보다 큰가?
                // 2. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 + sectionNum의 전체 높이 값 보다 작은가? = 스크롤의 값이 526 보다 작은가?
                if(scroll > sectionNum[i].offsetTop - window.innerHeight/3 && 
                scroll < sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight){
                    pageNum = i;
                    console.log(scroll);
                    if(scroll > sectionNum[i].offsetTop - window.innerHeight/3){
                        console.log('큼1')
                    }
                    if(scroll < sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight){
                        console.log('큼2');
                    }
                    
                    // console.log(sectionNum[i].offsetTop); // 8 785 1562 2339
                    // console.log(window.innerHeight/3) // 258
                    // console.log(sectionNum[i].offsetHeight); // 777
                    // 8 - 258 = -250 
                    // -236 + 734 = 527
                    // console.log(sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight); // 526
                    // console.log(scroll)
                    // console.log(pageNum);
                    // console.log(sectionNum[i].offsetTop - window.innerHeight/3) // -250

                    // 한번 돌았으면
                    break;
                }
                
            }

 

답변 1

답변을 작성해보세요.

0

안녕하세요 답변이 늦었습니다.

for문 안의 첫 if문에서 현재 스크롤 값과 페이지들의 높이값을 비교하는 게 있는데요.

if문을 보시면 두개의 조건이 있고 && 을 사용했습니다.

이 것은 두 조건이 모두 true일때를 말합니다.

그러니 '큼1', '큼2' 가 콘솔에 찍히고 있는겁니다. (두개의 조건을 따로 풀어서 넣어준 것 뿐이니까요)

이미 두 조건을 만족해서 if문 안으로 들어온겁니다.

궁금증이 풀리셨나요?

참고로 두개이상의 조건중 하나만 만족해도 넘어가게 하려면 || 조건연산자를 사용하시면 됩니다.

||, && 조건연사자를 검색해보세요~

 

감사합니다.