모바일 웹을 개발하다 보면, 데스크톱에서는 마우스로 스크롤바(막대기)를 클릭해서 드래그할 수 있는데, 모바일에서는 스크롤바를 손가락으로 터치해도 아무런 반응이 없는 경험을 하게 됩니다. 왜 이런 현상이 발생하는지, 그리고 CSS의 touch-action 속성과 어떤 관련이 있는지 MDN 공식 문서를 바탕으로 정리해봅니다.
모바일 브라우저의 스크롤 UX: 왜 스크롤바는 터치가 안 될까?
모바일 브라우저(크롬, 사파리, 삼성 인터넷 등)에서는 스크롤바가 오직 시각적 안내 역할만 합니다. 즉, 스크롤바(막대기) 자체를 손가락으로 터치해서 드래그하는 기능은 기본적으로 지원되지 않습니다. 사용자는 컨텐츠 영역을 손가락으로 드래그해서 스크롤을 이동시키는 것이 표준 UX입니다.
이것은 단순히 라이브러리의 한계가 아니라, 모바일 브라우저의 기본 정책입니다. 스크롤바를 두껍게 만들어도, 스크롤바를 직접 터치해서 드래그할 수 없습니다. 오직 컨텐츠 영역을 터치해서만 스크롤이 가능합니다.
touch-action이란?
MDN 공식 문서(touch-action - CSS: Cascading Style Sheets | MDN)에 따르면, touch-action CSS 속성은 터치 스크린 사용자가 해당 요소에서 어떤 제스처(예: 스크롤, 핀치줌 등)를 사용할 수 있는지 제어합니다.
주요 값
auto: 브라우저가 모든 제스처(스크롤, 줌 등)를 기본적으로 처리합니다. (기본값)none: 모든 제스처를 비활성화합니다.pan-x,pan-y: 각각 수평/수직 스크롤만 허용합니다.manipulation: 스크롤과 핀치줌만 허용하고, 더블탭 줌 등은 비활성화합니다.
이 속성은 주로 커스텀 드래그/줌 UI를 만들 때, 브라우저의 기본 스크롤/줌 동작을 막고 싶을 때 사용합니다. 하지만, 스크롤바 자체에 적용해도 모바일 브라우저는 스크롤바를 터치 타겟으로 인식하지 않기 때문에, 스크롤바를 드래그하는 동작은 여전히 불가능합니다.
결론: 모바일에서 스크롤바는 터치 드래그가 불가능하다
- 모바일 브라우저는 스크롤바(막대기)를 터치 타겟으로 인식하지 않습니다.
- 스크롤바를 손가락으로 직접 드래그하는 기능은 모바일 표준 UX에 존재하지 않습니다.
- 오직 컨텐츠 영역을 터치해서 스크롤하는 것이 정상 동작입니다.
- 이는 크롬, 사파리, 삼성 인터넷 등 모든 모바일 브라우저에서 동일하게 적용됩니다.
- CSS의
touch-action속성은 터치 제스처를 제어할 수 있지만, 스크롤바 자체의 터치 드래그 동작을 활성화할 수는 없습니다.
참고 자료
모바일 웹에서 스크롤 UX를 설계할 때, 스크롤바를 직접 터치해서 드래그하는 기능은 기대하지 않는 것이 좋습니다. 표준 UX에 맞게 컨텐츠 영역을 터치해서 스크롤하는 방식을 사용하는 것이 가장 자연스럽고, 접근성 측면에서도 권장되는 방법입니다.
