여러분과 사용자는 화면에 부드럽게 반응하고 스크롤하는 모바일 웹 앱을 터치. 개발은 쉽지만 안타깝게도 모바일 웹에서 구현으로 왼쪽 스크롤 중에 브라우저가 터치 이벤트에 반응 자세한 내용은 TouchEvent 사양에 나와 있습니다. 따라서 접근 방식은 대략 4가지 카테고리로 나눌 수 있습니다. 이 스크롤의 부드러움과 스크롤해야 하는 동작 간의 개발자 제어 유지
터치 이벤트 처리의 4가지 모델
브라우저 간의 동작 차이는 4가지 모델로 나뉩니다.
일반 동기 이벤트 처리
Touchmove 이벤트는 스크롤 중에 전송되며 터치 이동 처리가 완료될 때까지 각 스크롤 업데이트가 차단됩니다. 이는 이해하기 가장 간단하고 강력하지만 스크롤 성능에는 좋지 않습니다. 스크롤하는 동안 각 프레임이 기본 스레드에서 차단되어야 하기 때문입니다.
브라우저: Android 브라우저 (Android 4.0.4, 4.3), 모바일 Safari (div 스크롤 시)
비동기 터치 이동 처리
Touchmove 이벤트는 스크롤 중에 전송되지만 스크롤은 비동기식으로 진행할 수 있습니다 (스크롤이 시작된 후에는 touchmove 이벤트가 무시됨). 이로 인해 '이중 처리'가 발생할 수 있습니다. 예를 들어 웹사이트에서 touchmove로 작업을 수행한 후에도 계속 스크롤하여 이벤트에 대해 preventDefault를 호출하여 브라우저에 이를 처리하지 말라고 지시합니다.
브라우저: 모바일 Safari (문서를 스크롤하는 경우), Firefox
스크롤하는 동안 Touchmove가 억제됨
Touchmove 이벤트는 스크롤이 시작된 후 전송되지 않으며 touchend 이벤트 이후 다시 시작되지 않습니다. 이 모델에서는 고정된 터치와 스크롤의 차이를 구별하기가 어렵습니다.
브라우저: 삼성 브라우저 (mousemove 이벤트 전송됨)
스크롤 시작 시 터치 취소
스크롤 부드러움과 개발자 제어의 두 가지 방식을 모두 사용할 수는 없습니다. 이 모델은 포인터 이벤트 사양의 의미 체계와 유사하게 원활한 스크롤과 이벤트 처리 사이의 절충점을 분명하게 보여줍니다. '당겨서 새로고침'과 같이 손가락을 추적해야 하는 일부 환경은 사용할 수 없습니다.
브라우저: Chrome 데스크톱 M32 이상, Chrome Android
변화가 필요한 이유
Android용 Chrome은 현재 Chrome의 이전 모델인 스크롤 시 touchcancel을 사용합니다. 스크롤 성능은 향상되지만 개발자에게 혼란을 야기합니다. 특히 일부 개발자는 touchcancel 이벤트 또는 이로 인해 일부 웹사이트가 다운되었습니다. 더 중요한 것은 당겨서 새로고침과 같은 UI 스크롤 효과 및 동작의 전체 클래스, 숨겨진 막대 및 스냅 포인트는 구현하기 어렵거나 불가능합니다. 있습니다.
이러한 효과를 지원하기 위해 특별히 하드코딩된 기능을 추가하는 대신 Chrome은 개발자가 자신의 웹 애플리케이션을 쉽게 이해할 수 있도록 이러한 효과를 직접 구현할 수 있습니다. Rational Web Platform 참조 이 철학에 대한 일반적인 설명이 될 것입니다.
Chrome의 새로운 모델: 제한된 비동기 터치 이동 모델
Chrome에서 새로운 동작 도입
다른 브라우저용으로 작성된 코드와의 호환성을 향상시키기 위해
터치 동작이 필요한 다른 시나리오도 사용 설정할 수 있습니다.
이벤트가 발생합니다. 이 기능은 기본적으로 사용 설정되어 있으며
chrome://flags\#touch-scrolling-mode 플래그를 사용하여 해제합니다.
새 동작은 다음과 같습니다.
- first touchmove가 동기식으로 전송되어 스크롤할 수 있습니다. 취소됨
- 활성 스크롤 중
<ph type="x-smartling-placeholder">
- </ph>
- 터치 이동 이벤트가 비동기식으로 전송됨
- 200ms당 이벤트 1개로 제한됨 또는 CSS 15px 슬롭 영역인 경우 초과
- Event.cancelable이 false인 경우
- 그 외의 경우 활성 스크롤 시 touchmove 이벤트가 평소와 같이 동기식으로 실행됩니다. 스크롤 한도에 도달하여 종료되거나 불가능함
- Touchend 이벤트는 항상 사용자가 손가락을 뗄 때 발생합니다.
Android용 Chrome에서 이 데모를 사용해 보고
chrome://flags\#touch-scrolling-mode 플래그를 사용하여 차이를 확인합니다.
여러분의 의견을 공유해 주세요
비동기 터치무브 모델은 교차 브라우저 기능 개선 새로운 클래스의 터치 동작 효과를 사용할 수 있도록 지원합니다. Google은 개발자들이 어떻게 생각하고 있는지 듣고 사용할 수 있습니다.