모바일 Safari 브라우저에서 스크롤 튕김 (bounce effect) 문제 해결하기

안녕하세요. 명동섞어찌개입니다. 

모바일 웹서비스를 Angular 로 개발할때 position: fixed 요소가 상단에 있으면, 아이폰 사파리 브라우저에서 스크롤했을 때 윗 부분이 하얗게  사라지거나 하는 등의 다양한 문제가 생깁니다. (애초에 fixed 자체가 사파리 브라우저랑은 잘 안 맞는듯요.. 몇 년 전에 비하면 많이 개선된 듯하지만요)

이런 문제로 Angular 로 개발할 때뿐 아니라 모바일 웹에서는 종종 스크롤 튕김(?) 을 스크립트로 막기도 합니다.

보통 jquery 나 javascript 로 할 때는 이런 코드를 많이 썼지요

document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);

 

touch 관련 이벤트 전파를 막아서 해결된 경험이 있습니다.

이번에 Angular 로 모바일 프로젝트를 진행하면서 비슷한 문제에 부딪혀서 index.html 에 <script> 태그를 넣고 저 코드를 넣었습니다.

결론부터 말씀드리면 오히려 없던 에러가 생기더라구요. 터치 하다가 먹통이 되어버리고.. ㅠㅠ

 

그래서 CSS 로 간단하게 처리하는 솔루션을 찾았습니다.

body, html {
     position: fixed;
     width: 100%;
     overflow: hidden;
     transform: translate3d(0,0,0);
     -webkit-transform: translateZ(0);
}

 

끝~~ 참 쉽죠? 스크립트 없이 깔끔하게 해결됩니다.

 

그리고 fixed 가 들어가있는 div 와, 그 상위 div 에게 이 css 를 먹여주세요.

transform: translate3d(0,0,0);
-webkit-transform: translateZ(0);
-webkit-overflow-scrolling:touch;

저는 이렇게 해서 해결이 됐습니다 ㅠ