• 전역변수를 피하기 위해서는 즉시 실행 함수에 변수를 넣는다.

(function(){
	const a = 100;
})()

console.log(a) // error

스크롤을 했을때 벽이동 구현

• house 요소를 이동 시킬 것

  (function(){
    const houseElem = document.querySelector('.house');
  
    houseElem.addEventListener('scroll', function(){
      // 스크롤 된 값에 따라서 translateZ를 바꿔준다.
  	console.log(pageYOffset);
    })
  })()
  

• 스크롤한 양만큼 이동해야함.

• 우리가 얼만큼 스크롤 했는지 수치로 알아야한다. pageYOffset

• 하지만 실제로 스크롤이 안된다 왜??? 전체 높이가 스크롤 될만큼 높지 않아서…

  • 강제로 body의 높이를 height : 500vw로 만들어준다.

scrollY vs pageYoffset

<aside> 💡 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다.

</aside>

스크롤 되는범위는 몇일까?? 0~~스크롤바의 머리 부분

스크롤 가능한 영역 구하기 : body의 높이(문서의 높이) - 스크롤바 높이 (눈에 보이는 화면 높이)

<aside> 💡 스크롤바의 높이는 우리가 현재 보고 있는 페이지의 높이 이다.

</aside>

• 조금더 디테일한 그림

document.body.offsetHeight // 문서의 높이
window.innerHeight // 윈도우의 높이

참고 사진