web-dev-qa-db-fra.com

Désactiver la navigation dans les pages Web lors du balayage (avant et arrière)

Sur un téléphone Windows, dans IE, les utilisateurs peuvent revenir en arrière en balayant l'écran si le balayage provient de Edge. Cette fonctionnalité au niveau du système d'exploitation entrave l'utilisation de l'UX de ma page Web.

Est-ce qu'il y a des fichiers js ou css qui peuvent le désactiver? Un bidouillage ferait aussi l'affaire.

Un instantané du site Web de Windowsphone: enter image description here

Voici le lien vers la page de référence: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch

Veuillez noter que touchaction doit toujours être activé pour le défilement horizontal.

javascriptcssinternet-explorerwindows-phone-8windows-phone-8.1
36
Shekhar Joshi

Que diriez-vous d'empêcher l'action par défaut de l'événement de balayage. Quelque part dans votre document.ready ajouter (note J'ai inclus le document.ready dans cet exemple, seule la fonction doit être ajoutée):

$(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });

Dans ce cas, je crois que l'événement s'appelle 'touchmove'. Vous devrez peut-être l'étendre pour ignorer également le comportement par défaut de touchstart/touchend mais je ne suis pas sûr à 100%.

0
clovola

Découvrez ce Codepen par David Hill.

var elem = document.getElementById("container"); //area we don't want touch drag

var defaultPrevent=function(e){e.preventDefault();}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove" , defaultPrevent);

En fait, je pense que c’est aussi une bonne façon de construire des objets.

0
Jordan Nakamoto

C'est également un problème pour les utilisateurs de Mac qui ont configuré swipe-left pour naviguer en arrière. Vous ne pouvez pas désactiver ce paramètre, mais vous pouvez demander à l'utilisateur de confirmer son intention de naviguer https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload .

0
tommyTheHitMan