[2021.03.12] (TIL)Iphone 6이하 WebView 환경에서 스크롤 기능 막는 법

웹뷰 작업 중에, 영역 밖으로 튀어나와 스크롤이 생겨서 이 스크롤이 안되도록 막아야 하는 일이 있었다.

주로 스크롤이 안되고 화면이 고정되도록 하는 방식은 아래와 같다.

// css file

overflow: hidden;
touchAction : none; // 웹뷰 환경

 

그런데 이 방식이 아이폰 옛날 버전에서는 먹히지 않는 것이다. 
확인해보니 웹, 안드로이드, 아이폰 7 이상부터는 모두 괜찮은데, 아이폰 6 이하부터는 이게 먹히질 않는다.

시뮬레이션으로 확인해보니 touchAction: none 이란 속성이 옛날 IOS에서는 invalid 된다.

그래서 아래처럼 해결할 수 있었다.

position: 'fixed';
top: 0;
bottom: 0;
left: 0;
right: 0;

한방에 된다..ㅎㅎ

참고로 top, bottom, left, right 를 inset 속성으로 한번에 쓸 수도 있는데, 요거는 아이폰에서 먹히질 않아서 결국 따로따로 써줘야 한다.

 

CSS 외웁시다.