web-dev-qa-db-fra.com

Empêcher le balayage entre les pages Web dans l'iPad Safari

En balayant les bords gauche et droit du navigateur Safari de mon iPad, vous vous déplacez entre les pages Web actuellement ouvertes. Y a-t-il un moyen de le prévenir?

J'ai essayé d'ajouter des gestionnaires touchstart et touchmove sur le bord de la page qui stopPropagation et preventDefault, mais ils ne semblent pas avoir d'effet, ni touch-action CSS.

Une question similaire a été posée en 2014 avec des réponses négatives: iOS 7 - existe-t-il un moyen de désactiver la fonctionnalité de balayage avant et arrière dans Safari?

Y a-t-il une solution de contournement maintenant en 2018?

javascripthtmlioscsssafari
4
ᴇʟᴇvᴀтᴇ

Apple a fourni ces instructions après iOS9.

Le guide vous permet de désactiver 

  1. Défilement 

    fonction touchMove (événement) {

    // Prevent scrolling on this element

event.preventDefault();

...

    }

  2. Pincer et zoomer

    fonction gestureChange (événement) {

    // Disable browser zoom

event.preventDefault();

...

    }

Vous pouvez identifier un geste de balayage comme suit:

  1. Commencez le geste si vous recevez un événement touchstart contenant un contact cible .
    1. Abandonnez le geste si, à un moment quelconque, vous recevez un événement Avec> 1 touches. 
    2. Continuez le geste si vous recevez un événement touchmove Principalement dans la direction x. 
    3. Abandonnez le geste si vous recevez un événement touchmove Principalement dans la direction y. 
    4. Terminez le geste si vous recevez un événement de fin .

Le guide complet est affiche ici .

Faites-moi savoir si vous avez besoin de plus d'aide.

Nitine, Defuzed

1
Nitin K.

Il semble n'y avoir aucun moyen de désactiver cette fonctionnalité. En tant que solution de contournement, j'ai constaté qu'une zone morte de 24 pixels de chaque côté de la page semble être suffisante pour arrêter la navigation involontaire.

Voici mon CSS:

body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 24px;
  right: 24px;
  background-color: #ccc;
}

Le fait de former le corps position: fixed empêche également Safari de produire l’effet gênant de survol/défilement.

0
ᴇʟᴇvᴀтᴇ

Essayez ceci dans la balise <body>:

onload='ontouchmove()="return(function(event) { event.preventDefault(); event.stopPropagation(); return(false); } );"'

J'imagine qu'il pourrait y avoir des effets secondaires en empêchant IOS de déménager, mais ils sont probablement légers pour SPW.

0
G. Andrews