Comment puis-je empêcher le comportement par défaut de la touchmove événement dans iOS 5?

J'ai une application basée sur le web qui comprend un élément que l'utilisateur peut faire défiler avec le doigt. J'utilise le cas de la méthode preventDefault pour empêcher le comportement par défaut lorsque la touche move déplace tout autour de l'écran sur les appareils iOS.

Malheureusement, cela ne semble pas fonctionner sous iOS 5 qui je l'ai juste mis à jour pour ce matin. Je suppose que c'est juste fait différemment dans iOS 5, mais je ne suis pas encore en mesure de trouver une ressource qui fournit des instructions.

Merci!

Mise à jour #1: je n'ai pas été en mesure de trouver une réponse à ma question particulière, mais j'ai pu régler mon code un peu à utiliser l'-webkit-débordement-le défilement de style (une valeur de "toucher") et de mettre en œuvre les snazzy le défilement à inertie capacité (où le contenu défile plus rapidement selon la vitesse de votre balayage et "bande de caoutchouc de rebond" de retour si elle atteint les limites. Assez cool...

Mise à jour #2: j'ai un autre problème étrange maintenant. Pour une raison étrange, que le trop-plein du comportement de défilement se mélange parfois avec lequel vous devez faire glisser votre doigt vers la gauche et la droite sur l'élément contenant afin de rendre son contenu déplacer vers le haut et vers le bas. Je ne suis pas encore en mesure de comprendre pourquoi cela se produit - quelqu'un a une idée???

InformationsquelleAutor natlee75 | 2011-10-13
  1. 8

    J'ai trouvé une solution très simple. Lorsque l'événement arrive dans votre élément qui est autorisé à faire défiler, simplement marquer l'événement. Sur l'écouteur d'événement sur le document il suffit de vérifier si l'indicateur est défini et arrêter seulement le cas si l'indicateur n'est pas défini:

    this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  //when you have containers that are srollable but 
  //doesn't have enough content to scroll sometimes:
  //event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
});

$(document).on('touchmove', function(event){
    if (!event.comesFromScrollable){
      event.preventDefault();
    }
});

    Vous pouvez également utiliser de l'événement.stopImmediatePropagation au lieu de cela, si vous n'avez pas besoin de l'eventListener sur l'élément de document, mais cela casse zepto.js tap dans mon cas:

    this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation();
});
    • Merci! Fonctionne comme un charme! J'ai modifié la manière que je viens d'ajouter un attribut data - et si c'est disponible défilement ne sera pas arrêté. de cette façon, nous pouvons enregistrer un eventlistener 🙂
    InformationsquelleAutor Andreas Köberle
  2. 6

    Tout d'abord, je peux vérifier que l'e.preventDefault() désactive le défilement dans iOS 5 en utilisant le code suivant:

    document.ontouchmove = function(e){ e.preventDefault(); }

    Malheureusement, cependant, cela désactive le défilement sur l'overflow:scroll divs. (Si quelqu'un a une solution pour que les feuilles à l'intérieur de l'élément de défilement est activé, s'il vous plaît partager.)

    Concernant la mise à jour#2, j'ai remarqué un comportement étrange quand il y a un défilement de l'élément imbriqué dans un autre élément déroulant (y compris la page elle-même). Parfois, l'appareil hésite sur quel élément que l'utilisateur a l'intention de les faire défiler. En particulier, j'ai remarqué ce problème à l'aide de la position:fixed. Ma solution était de s'assurer que le corps a 100% de la hauteur et que le défilement des éléments d'utiliser position:absolute lorsque cela est possible.

    • Peut-être que vous pourriez faire quelque vérification de la logique comme if($(e.currentTarget).css('overflow') != 'scroll') e.preventDefault();. Puisque le document.ontouchmove se déclenche après l'scollable de l'élément ontouchmove, vous pourriez faire el.ontouchmove = function() {allowScroll = true} puis ont document.ontouchmove utiliser cette valeur pour déterminer l'action, puis définissez la valeur à false.
    • Merci pour l'astuce. C'est un pas dans la bonne direction, ce qui vous permettra d'éviter le défilement sur un élément par élément (y compris directement à défiler sur le corps), mais si l'utilisateur touchmoves un défilement de l'élément qui est déjà à la limite de son défilement, elle va encore se retrouver le défilement du corps (montrant le gris de lin-dessous). Peut-être le seul moyen est d'interpréter le sens de la touchmove et de vérifier si l'élément est à la limite de son défilement de gamme?
    • Merci pour votre réponse. J'ai peut-être de ne pas souligner assez clairement ce comportement, je suis en train de parler. Avec iOS 4, je voudrais utiliser l'e.preventDefault() à l'intérieur d'un élément (par exemple, un DIV) avec trop-plein du touchmove gestionnaire d'événement pour que je puisse déplacer le contenu de la via positionnement absolu basé sur le mouvement du doigt l'intérieur de l'élément. Maintenant l'e.preventDefault() blocs de cela, lorsque j'ai essayer de bouger mon doigt l'ensemble de la page, ce qui n'a pas assez de contenu pour faire défiler, n'a pas tellement de défilement, mais se déplace autour de sorte que vous pouvez voir Safari texture d'arrière-plan derrière elle.
    • Cette solution m'a beaucoup aidé avec mon application basée sur le web. Cheers!
    InformationsquelleAutor Ryan Rapp