webview) ios와 android의 scroll 차이

웹뷰를 사용하여 안드로이드와 ios 앱을 동시에 만들면

스크롤 방식이 ios와 android가 다르다는점을 알 수 있습니다.

먼저 android는 모멘텀 스크롤 방식으로

스크롤을 손가락으로 튕구면 멈추지 않고 힘의 크기에 비례하여 계속해서 스크롤 됩니다.

이를 모멘텀 스크롤 방식이라합니다.

반면에 ios는 스크롤을 하면 손가락이 떼어지는(touchend) 순간 스크롤은 멈추게됩니다.

이를 해결하기 위해 스크롤 되는(overflow) element에 다음과 같은 css를 추가하면 해결됩니다.

-webkit-overflow-scrolling : touch;

auto는 기존 멈추는 방식(default)이며 touch 옵션을 사용하면 안드로이드처럼 

모멘텀 스크롤을 사용할 수 있게됩니다.

또한 안드로이드에서 ios처럼 멈추게 하고싶다면

스크롤되는 element의 자식들 모두에게 z-index : 0; css를 추가합니다.

만약 스크롤 되는 element의 id가 scroll이라면

#scroll * {

z-index: 0;

}

을 추가하면 모든 자식에게 한번에 css를 적용시킬수있습니다.