iOS 7 - есть ли способ отключить функцию смахивания назад и вперед в Safari?

83

Для некоторых веб-страниц мы используем функциональные возможности iPhone смахивания влево и вправо для вывода меню. Теперь, с iOS7, они представили возможность возвращаться и вперед к предыдущей и следующей страницам истории браузера с помощью свайпов влево и вправо.

Но есть ли способ отключить его для определенных страниц, чтобы не было противоречивого поведения при действиях смахивания?

ios safari ios7 MeghaK
источник
Его следует отличать по смахиванию, начиная с экрана. У вас есть пример веб-страницы, на которой возникает конфликт?
Руперт Ронсли
@RupertRawnsley Добавьте событие touchstart / touchmove на вашу веб-страницу с помощью console.log ('FIRED!'); в этом. Проведите пальцем по веб-странице от края, и вы заметите, что событие никогда не срабатывает. Прав ли я, предполагая, что это будет новое ожидаемое поведение?
Маркус
2
+1 за это. Утомительно, когда вы проводите пальцем, чтобы открыть меню.
TYRONEMICHAEL
2
+1 Пользователь понятия не имеет, что такое смахивание вне экрана по сравнению с смахиванием по экрану. Блерг!
Джозеф Юнке
1
Как пользователю с плохим зрением мне нужно сильно увеличивать масштаб и панорамировать, этот жест смахивания назад сводит меня с ума. Если кто знает, как отключить, хочу знать.
Бретт Райан,

Ответы:

12

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

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

window.history.replaceState(null, null, "#" + url)

вместо pushState или 

document.location.hash = url
Том Кларксон
источник
5
Да, но это предотвращает только историю в самом приложении при навигации. Другие приложения также могли отправить историю, поэтому iOS тоже обнаружит эту историю.
чувак
6

Пришлось использовать 2 подхода:

1) Исправление только CSS для Chrome / Firefox

html, body {
    overscroll-behavior-x: none;
}

2) Исправление JavaScript для Safari

if (window.safari) {
    history.pushState(null, null, location.href);
    window.onpopstate = function(event) {
        history.go(1);
    };
}

Со временем Safari будет реализовывать overscroll-behavior-x, и мы сможем удалить взлом JS.

Джон Доэрти
источник
Я добавил это, и на Mac это предотвращает срабатывание левого свайпа. Однако он полностью нарушает функциональность возврата (включая кнопку «Назад»), поэтому его нельзя использовать в качестве временного решения.
Шиме Видас
В моем случае это была цель, поскольку я создавал одностраничное приложение
Джон Доэрти
2
Но все же возможно, что кто-то откроет ваше приложение, щелкнув ссылку на другом веб-сайте (т. Е. Если этот сайт ссылается на ваше приложение). Чтобы исправить это, вам все равно придется обнаруживать жесты смахивания через touchmoveсобытия и выполнять приведенный выше код только в том случае, если ему не предшествовало смахивание. Это должно быть возможно.
Шиме Видас
Я обновил это, чтобы включить параметр только CSS для Chrome и Firefox
Джон Доэрти,
Вы уверены, что это работает на iOS? Я только что протестировал overscroll-behavior-x: none;Chrome на iOS 13, и это не повлияло на поведение свайп-навигации. Смахивание вправо по левому краю возвращает назад (и даже если это первая страница в истории вкладок, она все равно возвращается на главный экран).
naktinis