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

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

Programming/Angular 모바일 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 에

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

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

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

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

from http://ibks-platform.tistory.com/367 by ccl(A) rewrite - 2020-04-24 15:01:42