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