• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

21.05.17 16:20 작성 조회수 105

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 를 빼준거거든요