관성(가속) 스크롤 및 100vh(window.innerHeight)

관성(가속) 스크롤에 관하여

관성 스크롤이란, 사용자가 스크롤 이벤트를 멈췄음에도 불구하고(사실은 멈췄다고 인식하는거다. 눈으로 보기엔 실제 내 손가락이 트랙패드에서 떨어졌으니까)
스크롤 이벤트가 바로 멈추는 것이 아니라 서서히 감속하면서 멈추는 것을 뜻한다.
이러한 현상은 노트북 트랙패드 및 모바일에서 볼 수 있다.
이러한 현상 때문에 UI 스크립트를 짤 때 예상치 못한 변수가 많이 생겼다.

• 상단 고정 인터렉션
• https://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js
• fullpage.js에는 관성스크롤에 대한 대비가 되어있는 듯 하다. 원리를 알아보자..

fullpage.js - 관성스크롤에 영향 X
원리 파악 - 모든 섹션 및 html, body 태그 height : 100% ;
그리고 overflow: hidden;
이런식의 마크업을 통해 관성스크롤에 영향을 안받게 한 것 같음.
하지만 내가 구현해야되는 건 모든 부분이 one page scroll이 아님.
상단에서도 특정부분만 그렇게 작동해야됨.
그래서 fullpage.js는 좀 어렵다고 판단.

그래서 어찌어찌 구현했으나 관성 스크롤은….해결을 못함.

100vh(window.innerHeight)

처음 페이지가 로드될 때 모바일 브라우저의 상하단바(address bar…)가 사라졌을 때의 window.innerHeight 값을 읽어오고 싶었지만,
불가능..
이 부분이 아쉽..