모바일 디바이스에서 overscroll 막기

React Native와 웹뷰를 이용하여 어플리케이션을 만들다보니, 항상 QA를 많이 받는 것이 "앱처럼 만들어 주세요" 였다.

이번 주에는 앱처럼 "페이지가 없는 부분에서는 스크롤을 막아주세요" 라는 요청을 받았다.

해결

만일 x축 y축 모두 막고 싶다면 다음과 같이 사용하면 되지만, 나같은 경우에는 y만 막으면 ok이기 때문에 이 방법을 사용하였다.

  overscroll-behavior-y: none;

이 부분을 body와 해당하는 div에 추가적으로 적용하면 되지만, default가 되는 부분은 모두 막고 싶었기 때문에

*{
  overscroll-behavior-y: none;
}

모든 y에 대한 over scroll을 막아버렸다.