Momentum Scrolling

overflow: auto로 속성을 지정하면,

콘텐츠의 크기에 따라 스크롤 바를 추가할지 말지 자동으로 결정된다.

모바일웹에서 손가락으로 스크롤을 하는데, 이 때 발생하는 이벤트를 살펴보면,

• touchstart: 손가락이 닿을 때 발생
• touchmove: 손가락이 닿은 채 움직일 때 발생
• touchend: 손가락을 뗄 떼 발생

touchmove일 때 스크롤도 같이 움직이게 되는데, 손가락을 떼는 순간 즉시 스크롤이 멈추게 된다.

Momentum Scrolling이란?

momentum scrolling이란 touchend 이벤트 발생 시 즉시 스크롤이 멈추지 않고

스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속된다.

모바일 사용자가 보통 손가락을 튕기면서 스크롤링을 하기 때문에 손가락을 멈췄을 때도 자연스럽게 스크롤링될 것이라 기대한다.

이를 구현하기 위해서는 아래 속성을 추가해주면 된다.

webkit-overflow-scrolling: touch

참고 자료

https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-overflow-scrolling