• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

헉 너무 어려운거같아요!

21.05.01 16:16 작성 조회수 88

0

  if (scroll > section[i].offsetTop - window.innerHeight / 1.5 &&
            scroll < section[i].offsetTop - window.innerHeight / 1.5 + section[i].offsetHeight) {
            pageNum = i;
            console.log(section[i].offsetHeight)
            break;
          }

if문 안에있는 조건들..수학문제인거죠?

공식같은걸까요??

하.. 아무리 이해해보려고해도 .. 콘솔을 찍어가면서 해봐도

모르겟습니다 흑흑.. 모자란 제 머리가 이해할 수 있는 예시같은게 있을까요?.......

답변 2

·

답변을 작성해보세요.

2

사실 복잡합니다. 하나 하나 나눠서 잘 보셔야하긴 합니다.

쉬운 부분은 아닙니다.

if 조건문에 두 가지 조건이 만족해야 (&&) 하는 코드 입니다.

  if (scroll > section[i].offsetTop - window.innerHeight / 1.5 &&
   scroll < section[i].offsetTop - window.innerHeight / 1.5 + section[i].offsetHeight)

위 조건문을 나누어서 보시면

scroll 높이 값이 현재 화면의 섹션의 높이(offsetTop) 보다 크거나

scroll 높이 값이 현재 화면의 섹션의 높이(offsetTop) + 섹션의 길이 (offsetHeight) 보다 작으면

실행이 되는 겁니다.

(예: 섹션의 높이가 0, 길이가 500 이면 스크롤이 200이면 실행되고 600이면 안 되는거죠)

window.innerHeight / 1.5 때문에 헷갈리실 수도 있는데요.

빼고 테스트 한 번 해봐주세요.

if (scroll > section[i].offsetTop &&
scroll < section[i].offsetTop+ section[i].offsetHeight)

0

chair79님의 프로필

chair79

2022.02.06

강사님께서 괄호만 추가해 주셨더라면 좀 더 쉽게 이해 했을 수 있겠다 싶었습니다. 

 

if(scroll > (section[i].offsetTop - window.outerHeight/2)  && scroll < (section[i].offsetTop - window.outerHeight/2 + section[i].offsetHeight))

 

이렇게요.

비교 연산자와 명확한 구분을 안해 주셔서 그만...

참고로 if문 괄호 안이 참(true)일 경우에 넘어갑니다. 따라저 저 긴 문장이 참일경우에 바로 아래 단락을 실행하는거죠.

 

한국말로 하자면, 

( 스크롤 값이 섹션 1 번째 높이에서 윈도우 높이 절반을 뺀 값보다 크고, &&

스크롤 값이 섹션1 번째 높이에서 윈도우 절반 높이 값 더하기 섹션1번째 자체 높이값 보다 작은 경우. )

아래를 실행 하라. 

 

의미적으로는 섹션 1의 영역 안에 있을 경우의 i값을 나타냅니다.