개발자와 사용자는 터치에 원활하게 반응하고 스크롤하는 모바일 웹 앱을 원합니다. 개발은 쉽지만 안타깝게도 모바일 웹브라우저가 스크롤 중에 터치 이벤트에 반응하는 방식은 TouchEvent 사양의 구현 세부정보로 남겨집니다. 따라서 접근 방식은 대략 4가지 카테고리로 나눌 수 있습니다. 이 상황은 스크롤 부드러움을 제공하고 개발자 제어를 유지하는 것 사이의 근본적인 긴장을 드러냅니다.
터치 이벤트 처리의 4가지 모델
브라우저 간의 동작 차이는 네 가지 모델로 분류됩니다.
일반 동기 이벤트 처리
Touchmove 이벤트는 스크롤 중에 전송되며 각 스크롤 업데이트는 touchmove 처리가 완료될 때까지 차단됩니다. 이는 이해하기 가장 쉽고 가장 강력하지만 스크롤 중 각 프레임이 기본 스레드에서 차단되어야 하므로 스크롤 성능에는 좋지 않습니다.
브라우저: Android 브라우저 (Android 4.0.4, 4.3), 모바일 Safari (div 스크롤 시)
비동기 터치 이동 처리
Touchmove 이벤트는 스크롤 중에 전송되지만 스크롤은 비동기식으로 진행될 수 있습니다 (스크롤이 시작된 후에는 touchmove 이벤트가 무시됨). 이로 인해 이벤트가 '이중으로 처리'될 수 있습니다. 예를 들어 웹사이트에서 touchmove로 작업을 실행하고 이벤트에서 preventDefault를 호출하여 브라우저에 이벤트를 처리하지 말라고 지시한 후에도 계속 스크롤할 수 있습니다.
브라우저: 모바일 Safari (문서 스크롤 시), Firefox
스크롤 중에 Touchmove가 억제됨
Touchmove 이벤트는 스크롤이 시작된 후 전송되지 않으며 touchend 이벤트가 끝난 후에만 다시 시작됩니다. 이 모델에서는 정지된 터치와 스크롤을 구분하기 어렵습니다.
브라우저: 삼성 브라우저 (마우스 움직임 이벤트 전송됨)
스크롤 시작 시 Touchcancel
스크롤 부드러움과 개발자 제어라는 두 가지를 모두 가질 수는 없습니다. 이 모델은 포인터 이벤트 사양의 시맨틱과 마찬가지로 부드러운 스크롤과 이벤트 처리 간의 절충점을 명확하게 보여줍니다. 당겨 새로고침과 같이 손가락을 추적해야 하는 일부 환경은 불가능합니다.
브라우저: Chrome 데스크톱 M32 이상, Chrome Android
변경 이유
Android용 Chrome은 현재 Chrome의 이전 모델인 스크롤 시작 시 터치 취소를 사용합니다. 이 모델은 스크롤 성능을 향상시키지만 개발자의 혼란을 야기합니다. 특히 일부 개발자는 touchcancel 이벤트 또는 이를 처리하는 방법을 모르고 이로 인해 일부 웹사이트가 손상되었습니다. 더 중요한 것은 풀-투-리프레시, 숨김 막대, 스냅 포인트와 같은 UI 스크롤 효과와 동작의 전체 클래스를 제대로 구현하기 어렵거나 불가능하다는 점입니다.
Chrome은 이러한 효과를 지원하기 위해 특별히 하드코딩된 기능을 추가하는 대신 개발자가 이러한 효과를 직접 구현할 수 있는 플랫폼 프리미티브를 추가하는 데 집중하고 있습니다. 이 철학에 관한 일반적인 설명은 합리적인 웹 플랫폼을 참고하세요.
Chrome의 새로운 모델: 제한된 비동기 터치 이동 모델
Chrome에서는 스크롤 시 다른 브라우저용으로 작성된 코드와의 호환성을 개선하고 스크롤 중에 touchmove 이벤트를 가져오는 데 종속되는 다른 시나리오를 사용 설계하기 위해 설계된 새로운 동작을 도입합니다. 이 기능은 기본적으로 사용 설정되어 있으며 다음 플래그 chrome://flags\#touch-scrolling-mode를 사용하여 사용 중지할 수 있습니다.
새 동작은 다음과 같습니다.
- 스크롤을 취소할 수 있도록 첫 번째 touchmove가 동기식으로 전송됩니다.
- 스크롤이 진행 중일 때
- touchmove 이벤트는 비동기식으로 전송됩니다.
- 200ms당 1개 이벤트로 제한되거나 CSS 15px 경사 영역이 초과된 경우
- Event.cancelable이 false입니다.
- 그렇지 않으면 활성 스크롤이 종료되거나 스크롤 한도가 도달하여 불가능해질 때 touchmove 이벤트가 정상적으로 동기식으로 실행됩니다.
- touchend 이벤트는 사용자가 손가락을 들어 올릴 때 항상 발생합니다.
Android용 Chrome에서 이 데모를 사용해 보고 chrome://flags\#touch-scrolling-mode 플래그를 전환하여 차이를 확인할 수 있습니다.
여러분의 의견을 공유해 주세요
비동기 터치 이동 모델은 교차 브라우저 호환성을 개선하고 새로운 클래스의 터치 동작 효과를 사용할 수 있습니다. 개발자의 의견을 듣고 이 도구로 어떤 창의적인 작업을 할 수 있는지 확인하고자 합니다.