171 подписчик
Как отключить обновление страницы свайпом в мобильных браузерах?
Обновление свайпом — популярная функция обновления страницы в мобильных браузерах. Однако в некоторых случаях мы хотели бы отключить это поведение по умолчанию. Сделать это можно с помощью свойства CSS overscroll-behavior. Как видно из названия, это свойство позволяет изменить поведение по умолчанию при чрезмерной прокрутке контейнера.
Обновление свайпом можно отключить с помощью свойства CSS overscroll-behavior:
body {
overscroll-behavior: contain;
}
Установка overscroll-behaviour: contain отключает передачу прокрутки в родительский элемент — то есть сверхпрокрутка содержится только внутри самого элемента. Установка этого параметра в <body> предотвратит передачу чрезмерной прокрутки в браузере и, таким образом, предотвратит действие для обновления.
Однако обновление по запросу происходит вертикально, и в некоторых случаях нам бы хотелось, чтобы по умолчанию прокрутка выполнялась в горизонтальном направлении (на странице может быть слайдер или карусель с событиями пролистывания влево-вправо). Это можно сделать с помощью overscroll-behavior-y:
body {
overscroll-behavior-y: contain;
}
Около минуты
11 июля 2024