iOS 7: ¿hay alguna forma de desactivar la función de deslizar hacia atrás y hacia adelante en Safari?

82

Para algunas páginas web, utilizamos la funcionalidad de deslizar hacia la izquierda y hacia la derecha del iPhone para abrir los menús. Ahora, con iOS7, han introducido la capacidad de retroceder y avanzar a las páginas anteriores y siguientes del historial del navegador con movimientos de deslizamiento hacia la izquierda y hacia la derecha.

Pero, ¿hay alguna manera de deshabilitarlo para páginas específicas para no tener un comportamiento conflictivo en las acciones de deslizamiento?

ios safari ios7 MeghaK
fuente
Debe distinguirse por el deslizamiento que comienza fuera de la pantalla. ¿Tiene una página web de ejemplo donde ocurre un conflicto?
Rupert Rawnsley
@RupertRawnsley Agregue un evento touchstart / touchmove a su página web con un console.log ('FIRED!'); en eso. Mueva su dedo a la página web desde el borde y notará que el evento nunca se activa. ¿Estoy en lo cierto al suponer que este será el nuevo comportamiento esperado?
Marcus
2
+1 para esto. Es un problema cuando desliza el dedo para abrir un menú.
TYRONEMICHAEL
2
+1 El usuario no tiene idea de lo que es un deslizamiento fuera de la pantalla frente a un deslizamiento en pantalla. ¡Blergh!
Joseph Juhnke
1
Como usuario con problemas de visión, necesito acercar mucho el zoom y desplazarme, ese gesto de deslizar hacia atrás me vuelve loco. Si alguien sabe cómo desactivarlo, quiero saberlo.
Brett Ryan

Respuestas:

12

No puede deshabilitarlo directamente, pero el deslizamiento nativo hacia atrás solo ocurre si hay algo en el historial del navegador.

No funcionará en todos los casos, pero si tiene una aplicación web de una sola página abierta en una nueva pestaña, puede evitar que se agregue al historial usando

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

en lugar de pushState o 

document.location.hash = url
Tom Clarkson
fuente
5
Sí, pero esto evita solo el historial en la propia aplicación al navegar. Otras aplicaciones también pueden haber empujado un historial, por lo tanto, iOS también detectará esos historiales.
dude
5

Tuve que usar 2 enfoques:

1) CSS solo se corrige para Chrome / Firefox

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

2) Corrección de JavaScript para Safari

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

Con el tiempo, Safari implementará overscroll-behavior-x y podremos eliminar el hack de JS

John Doherty
fuente
Agregué esto y en Mac, evita que un deslizamiento hacia la izquierda se active hacia atrás. Sin embargo, rompe la funcionalidad de retroceso por completo (incluido el botón Atrás), por lo que no se puede utilizar como solución alternativa.
Šime Vidas
En mi caso, ese era el objetivo, ya que estaba creando una aplicación de una sola página
John Doherty
2
Pero aún es posible que alguien abra su aplicación haciendo clic en un enlace en otro sitio web (es decir, si ese sitio enlaza con su aplicación). Para solucionar esto, aún tendría que detectar los gestos de deslizamiento a través de touchmoveeventos y solo ejecutar el código anterior si no fue precedido inmediatamente por un deslizamiento. Debería ser posible.
Šime Vidas
Actualicé esto para incluir una opción solo de CSS para Chrome y Firefox
John Doherty
¿Estás seguro de que esto funciona en iOS? Acabo de probar overscroll-behavior-x: none;Chrome en iOS 13 y no tuvo ningún efecto en el comportamiento de navegación por deslizamiento. Deslizar el dedo hacia la derecha en el borde izquierdo retrocede (e incluso si esta es la primera página en el historial de pestañas, aún regresa a la pantalla de inicio).
naktinis