Вы и ваши пользователи хотите, чтобы мобильные веб-приложения реагировали и плавно прокручивались на прикосновения. Разработка их должна быть простой, но, к сожалению, то, как мобильные веб-браузеры реагируют на события прикосновения во время прокрутки, остается деталью реализации в спецификации TouchEvent . В результате подходы можно грубо разбить на 4 категории. Эта ситуация выявляет фундаментальное противоречие между обеспечением плавности прокрутки и сохранением контроля разработчика.
Четыре различные модели обработки сенсорных событий?
Различия в поведении браузеров можно разделить на четыре модели.
Обычная синхронная обработка событий
События Touchmove отправляются во время прокрутки, и каждое обновление прокрутки блокируется до тех пор, пока обработка touchmove не будет завершена. Это хорошо, так как является самым простым для понимания и самым мощным, но плохо для производительности прокрутки, поскольку это означает, что каждый кадр во время прокрутки должен блокироваться в основном потоке.
Браузеры: Android Browser (Android 4.0.4, 4.3), Mobile Safari (при прокрутке div)
Асинхронная обработка touchmove
События Touchmove отправляются во время прокрутки, но прокрутка может происходить асинхронно (событие touchmove игнорируется после начала прокрутки). Это может привести к «двойной обработке» событий, например, к продолжению прокрутки после того, как веб-сайт что-то делает с touchmove и вызывает preventDefault для события, сообщая браузеру, что не нужно его обрабатывать.
Браузеры: Mobile Safari (при прокрутке документа), Firefox
Touchmove подавляется при прокрутке
События Touchmove не отправляются после начала прокрутки и не возобновляются до события touchend. В этой модели трудно отличить стационарное касание от прокрутки.
Браузеры: Samsung Browser (события mousemove отправляются)
Нажмите, чтобы отменить при начале прокрутки
Невозможно иметь и то, и другое — плавность прокрутки и контроль разработчика — и эта модель делает очевидным компромисс между плавной прокруткой и обработкой событий, аналогично семантике спецификации Pointer Events . Некоторые действия, которые могут потребовать отслеживания пальца, например, потянуть для обновления, невозможны.
Браузеры: Chrome Desktop M32+, Chrome Android
Зачем что-то менять?
Chrome для Android в настоящее время использует старую модель Chrome: touchcancel при начале прокрутки, что повышает производительность прокрутки, но приводит к путанице для разработчиков. В частности, некоторые разработчики не знают о событии touchcancel или о том, как с ним работать, и это привело к поломке некоторых веб-сайтов. Что еще более важно, целый класс эффектов и поведений прокрутки пользовательского интерфейса, таких как pull-to-refresh , hidey bars и snap points , трудно или невозможно реализовать должным образом.
Вместо добавления специально запрограммированных функций для поддержки этих эффектов, Chrome стремится сосредоточиться на добавлении примитивов платформы, которые позволяют разработчикам реализовывать эти эффекты напрямую. См. A Rational Web Platform для общего изложения этой философии.
Новая модель Chrome: регулируемая асинхронная модель Touchmove
Chrome представляет новое поведение , разработанное для улучшения совместимости с кодом, написанным для других браузеров при прокрутке, а также для включения других сценариев, которые зависят от получения событий touchmove при прокрутке. Эта функция включена по умолчанию, и вы можете отключить ее с помощью следующего флага, chrome://flags\#touch-scrolling-mode .
Новое поведение:
- Первое касание отправляется синхронно, чтобы можно было отменить прокрутку.
- Во время активной прокрутки
- события touchmove отправляются асинхронно
- ограничивается до 1 события в 200 мс или при превышении области CSS 15px
- Event.cancelable — ложно
- В противном случае события touchmove срабатывают синхронно, как обычно, когда активная прокрутка завершается или становится невозможной из-за достижения предела прокрутки.
- Событие touchend всегда происходит, когда пользователь поднимает палец.
Вы можете попробовать эту демонстрацию в Chrome для Android и переключить флаг chrome://flags\#touch-scrolling-mode чтобы увидеть разницу.
Дайте нам знать, что вы думаете
Модель Async Touchmove имеет потенциал для улучшения кросс-браузерной совместимости и включения нового класса эффектов сенсорных жестов. Нам интересно услышать, что думают разработчики, и увидеть креативные вещи, которые вы можете сделать с ее помощью.