헉 너무 어려운거같아요!

인터랙티브 개발 실무 끝장내기 [역량 강화편]

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

작성

169

  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문 안에있는 조건들..수학문제인거죠?

공식같은걸까요??

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

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

자바스크립트 스크롤이벤트 인터랙티브 웹 javascript

답변 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) 

chair79

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

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값을 나타냅니다.

인프런 커뮤니티 질문&답변

헉 너무 어려운거같아요!