inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

섹션 5 if문 질문

311

지니재기

작성한 질문수 4

0

안녕하세요. 선생님

섹션 5의 step2 강의를 듣다 헷갈리고 확실하게 알고 싶어서 질문 올립니다.

if(winScrollTop > sectionMainTop && winScrollTop < sectionMainBottom){ //섹션에 진입했는지 체크합니다. 

            if(!sectionIsMoving){ //애니메이션이 진행중인지 체크합니다., false라면

                sectionIsMoving = true; //섹션이 이동중인지 체크하는 변수

                moveStartRender(); //섹션 이동을 처리해주는 함수

            }

   //console.log('section in');

            

        }

이 부분 코드 if문을 제가..해석한걸 들려드리면

winScrollTop(스크롤바의 현재위치)가 sectionMainTop(0) 보다 크고 , 

스크롤바의 현재 위치가 sectionMainBottom(sec_mainvis의 끝, 높이)보다 작을 경우  => 즉 sec_mainvis에  있을때, 진입했을때 sectionsMoving 이 false라면 true로 바꾸고 섹션이동 함수 실행을 해라가 맞나요?ㅠㅠ 

2번째 섹션인 sec_list_overlap에서 위로 스크롤 했을때 저 코드가 이해가 되는데(sec_mainvis 섹션에 진입해서)

맨 처음페이지를 로드 했을때도 

if(winScrollTop > sectionMainTop && winScrollTop < sectionMainBottom)

저 if문이 맞는거 같은데 왜 moveStartRender(); 가 실행이 안되는 건지 궁금합니다.

제가 놓치거나 잘못생각하는 부분이 있는거 같은데 어딘지 모르겠네요..

감사합니다.

jquery javascript HTML/CSS 인터랙티브-웹

답변 3

0

깡코딩

도움이 되었다니 기쁘네요 ^^

화이팅하세요 :D

0

지니재기

값이 둘다 0이라 그런것이었군요 ! ......선생님께서 알려주신걸 볼때는 항상 이렇게 쉬운것도 놓쳤구나 느끼게 되네요. ㅠㅠ

친절한 설명 감사합니다 ! ㅎㅎ 완강까지 달리겠습니다 :D 

0

깡코딩

질문1.이 부분 코드 if문을 제가..해석한걸 들려드리면 winScrollTop(스크롤바의 현재위치)가 sectionMainTop(0) 보다 크고 , 스크롤바의 현재 위치가 sectionMainBottom(sec_mainvis의 끝, 높이)보다 작을 경우  => 즉 sec_mainvis에  있을때, 진입했을때 sectionsMoving 이 false라면 true로 바꾸고 섹션이동 함수 실행을 해라가 맞나요?ㅠㅠ

- 답변 : 맞습니다 :D

질문2.if(winScrollTop > sectionMainTop && winScrollTop < sectionMainBottom) 저 if문이 맞는거 같은데 왜 moveStartRender(); 가 실행이 안되는 건지 궁금합니다.

- 답변 : 맨 처음 실행했을때는 winScrollTop 값이 0이고 sectionMainTop 값도 0 이기 때문에 조건에 충족하지 못합니다 :D

만약 다음 조건문이라면 

if(winScrollTop >= sectionMainTop && winScrollTop < sectionMainBottom)

조건에 충족되어 실행되겠죠?? 그럼 페이지가 로드 되자 마자 아래로 이동하게 되어 첫번째 섹션을 보지 못할겁니다.

- 보충설명 -

그리고 만약 페이지가 로드될때 이전 스크롤 위치를 기억해 로드될 경우에도 

winScrollTop > sectionMainTop && winScrollTop < sectionMainBottom

이조건에 만족한다면 무빙이 일어날꺼구요!

만약 이전 스크롤 위치가 sectionMainBottom 보다 크다면 moveStartRender 가실행되지 않겠죠?

그렇게 되면 액티브되야 하는 요소들이 액티브 되지 못해 오류가 생긴듯 보일 수 있으니

if( winScrollTop >= sectionMainBottom){ 

    activeCehck();

}

다음 조건문과 activeCehck 함수를 통해 액티브 되야 하는 요소들을 액티브 해주는거죠^^

지니재기님이 잘 이해하고 계십니다 조금만 더 연구해보세요 ^^ 거의 다온듯 합니다

그럼 또 다른 궁금증이 생기거나 이해가 가지 않을때 문의주세요^.^

다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요

0

197

1

반응형에 대해 질문이 있습니다 !

0

366

1

날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?

0

379

1

함수가 정의되기 전에 함수 호출

0

343

1

섹션12 보너스 챕터에 관한 질문입니다!

0

468

1

5-3-1 강좌 섹션 질문 합니다.

0

312

1

죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.

1

463

3

화면 높이 관련 질문 있습니다.

1

433

1

선생님

0

370

1

5-2 vanilla.html 질문합니다.

0

422

1

5-3-2 질문입니다.

1

293

1

5-2 추가 질문이요

0

345

2

5-2 ! 질문이요.

0

266

1

안녕하세요!

0

272

1

질문드립니다.

1

366

2

질문드립니다.

0

1664

3

색션6강 카운트관련 문의드립니다!

0

238

1

섹션5 관련 질문드립니다.

0

261

1

setProperty 를 재활용 하고싶습니다.

0

210

1

IntersectionObserver

0

255

1

offsetheight와 scrollheight

0

398

1

완성된코드를 그대로 가져왔는데 크기가 이상해요

0

428

2

2:56에 10씩 증가시키는건 어떻게 하신건가요?

0

315

1

<script>에 $(function(){})으로 감싸준 이유

0

207

1