-webkit-overflow-scrolling

-webkit-overflow-scrolling

MDN 링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

-webkit-overflow-scrolling: touch; /* lets it scroll lazy */

-webkit-overflow-scrolling: auto; /* stop scrolling immediately */

HTML 페이지를 작성하다보면 body의 스크롤이나 overflow : scroll; 등으로 인해 스크롤이 생긴다.

안드로이드나 PC웹에서의 동작은 문제가 없는데 

iOS는 touch 값을 지정해 주지 않는다면 overflow scroll의 동작은 뻑뻑하게 동작한다.

즉, 터치가 움직이는 곳만큼만 스크롤이 움직이고 멈춘다.

-webkit-overflow-scrolling : touch; 속성을 적용한다면 스크롤이 부드럽게 움직이는 효과가 된다.

다만. 이 효과는 iOS7에서 스크롤 하단까지 움직인 후 추가로 더 Flicking 이 되면 페이지가 전체 바운스되어

그 바운스가 제자리로 돌아오는 시간만큼의 프리징같이 느껴지는 현상이 나타났다.

최신 버전은 그런 바운스이 육안으로는 안나타나지만 

프리징 같은 현상이 나타나는건 동일했다.

이를 해결하기 위해 CSS의 transform, transition 을 사용하였고

네이버에서 만든 jindo.m.scroll 컴포넌트를 적용하였다.