Изображение заголовка создано с помощью DALLE2

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

Потяните, чтобы обновить — это удобный способ обновления страницы пользователями. Это началось в мобильных приложениях, таких как Twitter, и довольно скоро было адаптировано мобильными браузерами.

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

Существует множество хаков. Некоторые из них более инверсивны и вызывают побочные эффекты. Например, preventDefault для события touchMove. Даже при выполнении на одном div это предотвратит все события touchMove на этом div. Этот обходной путь предотвратит обновление по запросу, но также предотвратит множество других функций, таких как прокрутка диалогового окна и т. д.

Лучший способ — найти решение, основанное только на CSS, которое сообщит браузеру, как вести себя только для определенных действий прокрутки.

Действия, о которых мы говорим, называются overscroll-behavior.

Что такое overscroll-поведение?

Overscroll, или, более конкретно, overscroll-behavior, описывает, что должен делать браузер при достижении верхней или нижней части страницы.

Есть три разных значения для определения поведения перелистывания.

Авто, содержать и ничего.

overscroll-behavior: auto, как вы уже догадались, является поведением по умолчанию. Это даст нам хорошо известный эффект отскока при достижении верхней или нижней части прокручиваемого элемента. Для целых страниц это может привести к обновлению, чего мы хотим предотвратить.

overscroll-behavior: contains, похоже на auto, главное отличие в том, что цепочка прокрутки отключена. Для краткости это означает, что мы можем прокручивать целевой элемент и получать эффекты отскока, но при достижении верха или низа мы не будем прокручивать дальше.

overscroll-behavior: none, никаких эффектов, подпрыгиваний и прочего при достижении конца полосы прокрутки. Достигнув вершины или низа, он просто остановится и больше ничего не сделает. Ничто иное также означает не тянуть для обновления! Это именно то, чего мы хотим добиться!

Так что overscroll-behavior: none — это то, что нам нужно.

Как упоминалось выше, мы можем предотвратить это, используя overscroll-behavior: none. Это просто деактивирует все побочные эффекты прокрутки, которые мы не хотим иметь. Единственным недостатком является то, что мы теряем анимацию отскока при достижении конца нашей полосы прокрутки. Таким образом, он будет немного больше похож на бумагу.

Как предотвратить тянуть, чтобы обновить

Хорошо, теперь мы многое узнали о чрезмерной прокрутке, давайте не будем объединять это, чтобы предотвратить обновление по запросу.

Чтобы предотвратить обновление по запросу в Safari и во всех других браузерах, нам нужно применить overscroll-behavior: none к элементу HTML.

<style>
html {
  overflow: hidden;
  overscroll-behavior: none;
}
</style>

Как предотвратить тянуть для обновления в vue.js

Как вы знаете, я одержим Vue. Но иногда это может быть и особенная снежинка.

Вышеупомянутые решения не работали для моих проектов из коробки, и мне было интересно, почему. Это работало для простых тестовых проектов HTML, но реализовано в моем приложении vue, оно не работало — WTF!

Сначала я думал, что причина может быть в каких-то перезаписях где-то, но это было не так.

После некоторых образованных проб и ошибок я узнал.

Когда мы хотим применить CSS к нашему HTML, мы хотим сделать это напрямую. Поведение сверхпрокрутки было определено в теге стиля области действия.

Согласно документации vue:

Если тег <style> имеет атрибут scoped, его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM.

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

Таким образом, решения заключались в том, чтобы просто поместить приведенный выше фрагмент в стандартный тег стиля.

Сделанный! Удивительный! Нашим пользователям это понравится!

<style>
html {
  overflow: hidden;
  overscroll-behavior: none;
}
</style>

Спасибо за чтение!

Я надеюсь, что это краткое руководство смогло решить эту проблему для вас.

Удачного кодирования,

Алекс

Первоначально опубликовано на https://www.the-koi.com.