강의

멘토링

커뮤니티

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

최상욱님의 프로필 이미지
최상욱

작성한 질문수

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

페이지 스크롤링 제가 이해한게 맞을까요 ..?

작성

·

187

0

//두번째 방법
for(var i=0; i<totalNum; i++){
//console.log(i)
if(scroll > section[i].offsetTop - window.outerHeight/2 && // 스크롤 올릴때 2/1 지점을 넘어가면
scroll < section[i].offsetTop - window.outerHeight/2 + section[i].offsetHeight){ //스크롤 내릴때 2/1 지점을 넘어가면 섹션을 바꾸고 새로운 섹션의 높이를 더해줘서 스크롤Y 값과 비교 될수 있도록 한다.
pageNum = i;
console.log(section[i].offsetTop - window.outerHeight/2,scroll,section[i].offsetTop - window.outerHeight/2 + section[i].offsetHeight)
//scroll = 스크롤 위치 값
//section[i].offsetTop = 해당 섹션의 가장 위의 위치 값
//window.outerHeight = 화면에 보이는 height 값
//section[i].offsetHeight = 해당 섹션의 height 값

break;
}

답변 1

0

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

네 맞습니다.

참고로 window.innerHeight 가 실제로 보여지는 화면의 높이입니다.

outerHeight 는 메뉴까지 포함.

그리고

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

위 처럼 바꿔서 테스트 해보시면 맨 위에서 페이지가 바뀝니다.

테스트 한 번 해보세요. 조금 더 이해하시기가 편할겁니다.

_

페이지 중간에서 바뀌게 하려고 화면 길이 /2 를 빼준거거든요

최상욱님의 프로필 이미지
최상욱

작성한 질문수

질문하기