[CSS] 모바일 밑으로 당겨서 새로고침 막기

리액트로 2048을 만들어보면서 키보드로 조작하는 거에다가 터치 지원도 추가해봤는데 실제로 스마트폰에서 테스트해보니 아래로 쓸어내리는 제스처와 밑으로 당겨서 새로고침이 겹쳐서 새로고침 되는 문제가 있었다. 해결법을 찾아보니 CSS로 간단하게 해결할 수 있었다.

body {
    overscroll-behavior-y: none;
}

위처럼 속성 하나만 추가해주면 된다. 글이 너무 짧으니 조금 설명하자면 overscroll-behavior 속성은 스크롤 끝에 도달했을 때 브라우저의 동작을 제어하는 속성이다. 기본값은 auto로 스크롤 끝에 도달하면 상위 요소가 스크롤 된다. contain으로 지정하면 스크롤 체인이 방지되어 스크롤 끝에 도달하더라도 상위 요소로 전파되지 않는다. none은 브라우저 기본 오버 스크롤 동작까지 막는다.

반드시 body 태그에 위 속성을 줘야 당겨서 새로고침 기능이 작동하지 않는다. 다른 곳에 넣으면 효과 없음... 무조건 페이지 전체에 적용해야 하는 게 별로라면 자바스크립트로 동적으로 속성을 조절하면 된다.

document.body.style.overscrollBehaviorY = 'none';

대충 이렇게?