CSS 한 줄로 안드로이드 Chrome의 '당겨서 새로고침' 기능 비활성화하기

안드로이드 Chrome의 '당겨서 새로고침' 기능이란?

안드로이드용 Chrome 브라우저에서는 이전까지 메뉴 안에 숨겨져 있던 새로고침 버튼 대신, 화면 상단을 아래로 당겨 페이지를 새로 고치는 '당겨서 새로고침(Pull-to-Refresh)' 기능이 기본으로 탑재되어 있습니다. 일반적인 웹사이트에서는 편리한 기능이지만, 웹앱이나 채팅 화면처럼 의도치 않은 새로고침이 문제를 일으킬 수 있는 애플리케이션에서는 오히려 불편함으로 작용합니다.

이런 경우 CSS의 overscroll-behavior 속성만으로 JavaScript 없이도 간단하게 해당 동작을 비활성화할 수 있습니다.

CSS 코드 예시

body {
  /* 당겨서 새로고침(pull-to-refresh) 비활성화 */
  /* overscroll 글로우 효과는 그대로 유지 */
  overscroll-behavior-y: contain;
}

overscroll-behavior 속성의 원리

overscroll-behavior는 스크롤이 경계에 도달했을 때 브라우저가 수행하는 기본 동작(새로고침, 뒤로 가기 탐색 등)을 제어하는 CSS 속성입니다. 위 예제에서 사용한 contain 값은 스크롤 체인(scroll chaining)을 차단하여 당겨서 새로고침 애니메이션이 실행되지 않도록 하면서, 화면 가장자리의 오버스크롤 글로우 효과는 그대로 남겨둡니다.

실제로 채팅박스 데모에 이 코드를 적용하면, 전체 페이지가 새로고침되면서 받은 편지함(inbox) 화면이 함께 흐려지던 중복 새로고침 현상을 깔끔하게 해결할 수 있습니다.

참고 사항

overscroll-behavior 속성은 Chrome 63+, Firefox 59+, Edge 등 주요 최신 브라우저에서 지원되므로, 안드로이드 환경뿐 아니라 데스크톱 웹에서도 호환성 걱정 없이 사용할 수 있습니다. iOS Safari는 부분적으로만 지원하므로, 크로스 플랫폼 대의이 필요하다면 추가 처리를 고려하는 것이 좋습니다.