Отключение функции обновления "pull down" в Chrome на Android

Быстрый ответ

Чтобы отключить обновление страницы путем свайпа вниз, добавьте следующее свойство в ваш CSS:

body {
  overscroll-behavior-y: none; /* После этого свайп вниз не будет вызывать обновление страницы */
}

Данный способ надежно блокирует возможность обновления страницы свайпом на устройствах Android.

Вы можете добавить это свойство в основной файл стилей или в раздел <style> вашего HTML-документа.

Корректировка поведения прокрутки

Вместо полного запрета свайпа для обновления страницы, можно более тонко управлять поведением прокрутки и взаимодействиями при касании.

Индивидуальные взаимодействия при касании

Применение свойства touch-action: none; к элементам, реагирующим на касания, позволяет улучшить навигацию пользователя и взаимодействие с контентом.

Подробнее об этом расскажет наш спикер на видео

Прокрутка с учетом границ контента

Сочетание свойств overflow-y: auto; и overscroll-behavior-y: none; для блока контента помогает тонко настроить прокрутку и предотвратить нежелательное обновление страницы.

.div-with-superpowers {
  overflow-y: auto;
  overscroll-behavior-y: none; /* Обновление страницы отменяется */
}

Такой метод обеспечивает точное управление прокруткой и обновлением страницы.

Продвинутое использование JavaScript

Определение обработчиков событий touchmove с вызовом preventDefault с помощью JavaScript или jQuery позволяет регулировать действия на странице. Это актуально, когда нужно запретить свайп для обновления страницы, при этом оставив возможность горизонтальной прокрутки, например, в слайдерах.

// В слайдерах нам нужна плавная горизонтальная прокрутка, свайпы вверх и вниз не нужны
document.querySelector('.carousel').addEventListener('touchmove', function(e) {
  if (/* условие для определения горизонтального свайпа */) {
    e.preventDefault();
  }
}, { passive: false });

Визуализация

Представляем вам визуальное объяснение того, как эти методы работают:

До: 🖼️👆➡️ (Взяли холст, потянули вниз, и он обновился)

После применения наших методов:

// Метод блокировки прокрутки
body.ontouchmove = function(e) { e.preventDefault(); /* Теперь холст зафиксирован на месте😀! */};

В итоге получаем:

После: 🖼️🔒➡️ (Холст заблокирован, тягать его вниз бесполезно. Успех! 🎉)

Управление поведением браузера и не только

Несмотря на то что CSS служит основой для настройки, дополнительное взаимодействие с HTML и JavaScript позволяет достичь большей гибкости и расширить возможности для продвинутых пользователей.

Долгосрочные стратегии с применением HTML

Мета-теги и манифесты сайта могут дать браузеру дружественные подсказки о желаемом поведении веб-приложения. Они не отключают свайп напрямую, но могут использоваться для создания доступных настроек.

<meta name="mobile-web-app-capable" content="yes">

Этот тег является явлением браузеру предпочтительного поведения вашего приложения.

Точное отключение при помощи JavaScript

JavaScript обработчики событий предлагают более высокую точность для деактивации обновления страницы путем свайпа вниз, особенно когда страница находится в самом верху. Это улучшает пользовательский опыт.

// Чтобы гарантировать, что обновление страницы не будет прервано:
window.addEventListener('touchmove', function(e) {
  if(window.pageYOffset === 0) {
    e.preventDefault();
  }
}, { passive: false });

Совмещение производительности и эстетики

Включение обработки событий касания может повысить производительность сайта. Поддержание стабильной и плавной работы всех элементов, особенно после внесения изменений, важно для обеспечения качественного пользовательского опыта. Тестирование на разных устройствах поможет достичь наилучших результатов.

Полезные материалы

1. Как переопределить стандартный свайп вниз для обновления в Chrome для Android – MDN — Описание свойства CSS touch-action.
2. Использование свойства CSS touch-action – CSS-Tricks — Полезные советы по использованию touch-action.
3. Контроль над скроллом – Chrome Developers — Рекомендации по настройке свайпа для обновления и поведения прокрутки.
4. Управление поведением переполнения в CSS – CSS-Tricks — Исследование свойства overscroll-behavior в веб-дизайне.
5. Статус функции overscroll-behavior в Chrome – Chrome Platform Status — Информация о текущем состоянии overscroll-behavior в браузере Chrome.
6. Спецификация W3C по свойству touch-action – Официальная документация W3C по свойству touch-action.