[iOS] momentum scroll - scroll API 사용하기

👻 모멘텀 스크롤(momentum scroll)이란?

모멘텀 스크롤은 모바일에서 손가락으로 화면을 터치해 스크롤을 할 때 스크롤에 가속도가 생기면서 화면이 이동하다가 천천히 멈추는 것을 말한다. 

-webkit-overflow-scrolling: touch;

위의 css를 적용하면 iOS의 웹 페이지에 모멘텀 스크롤을 적용할 수 있다. iOS 13 이상에서는 기본적으로 모멘텀 스크롤이 적용된다. 모멘텀 스크롤을 적용하면 화면이 끊겨보이는 것이 아닌, 자연스러운 스크롤링 효과를 볼 수 있다.

그러나 모멘텀 스크롤링 적용되면 스크롤이 실행 중일 때 scroll API가 정상적으로 작동하지 않는 현상이 발생한다.

탭이 있는 리스트 화면에서 탭을 변경하면 리스트 상단이 보일 수 있게 컨테이너의 스크롤 위치를 { top: 0 }으로 설정하는 코드를 작성했다.

containerElement.scrollTo({ top: 0 })

그러나 스크롤이 실행 중일 때 탭을 변경하면 예상과는 다르게 화면을 스크롤하기 전까지 리스트가 보이지 않는 현상이 발생했다.

👻 scroll API 정상 실행하는 방법

모멘텀 스크롤을 disable하면 scroll API는 정상 작동한다. 그러나 모멘텀 스크롤을 disable할 경우, 화면에서의 스크롤링이 자연스럽지 않은 느낌을 준다.

모멘텀 스크롤을 disable하지 않고도 scroll API를 정상적으로 사용할 수 있는 방법은 아래와 같다.

containerElement.style.overflowY = 'hidden';
containerElement.scroll({ top: 0 });
containerElement.style.overflowY = 'scroll';

스타일에서 스크롤을 없앴다가 scroll API를 실행 후 다시 스크롤을 생성하면 모멘텀 스크롤링 효과와 scroll API 모두 정상적으로 작동한다.