Ne peut pas éviter le " touchmove` partir de la fenêtre de défilement sur iOS

Nous essayons de faire défiler un élément sur notre web app iOS tout en empêchant la fenêtre de défilement. Nous sommes à la capture de la touchmove de l'événement sur la fenêtre, le défilement de l'élément par programme et (essayer de) prévenir la fenêtre elle-même à partir de défilement en appelant preventDefault sur l'événement.

Malheureusement cela ne fonctionne pas dans le navigateur Safari Mobile. La fenêtre continue de défiler en dessous de notre élément. La question sonne exactement comme le Webkit bug décrit dans https://bugs.webkit.org/show_bug.cgi?id=163207, mais que le problème aurait été résolu dans iOS 10.3 alors que je suis en cours d'exécution 11.3.

Attraper touchforcestart et de l'appel de preventDefault ne semblent empêcher le défilement de la fenêtre, mais nous l'appelons dans touchstart, ce qui semble être "trop tard" depuis la fenêtre défile toujours. Le défilement est seulement empêché la prochaine fois touchstart est appelé.

Des idées sur ce qui se passe? Nous sommes perplexes car c'est clairement un bug, mais il semble avoir été corrigé il y a quelques temps.

OriginalL'auteur Matthew Gertner | 2018-03-26

  1. 52

    J'ai récemment rencontré ce même problème. Vous aurez besoin de passer { passive: false } lors de l'enregistrement de la touchmove écouteur d'événement. par exemple,

    document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

    C'est parce que le document toucher les écouteurs d'événement sont maintenant passive par défaut dans Safari 11.1, qui est livré avec iOS 11.3. Ce changement est documenté dans le Safari 11.1 notes de version:

    Api Web

    • [...]
    • Mise à jour de la racine du document de toucher des écouteurs d'événement, d'utiliser le mode passif améliorer les performances de défilement et de réduire les accidents.
    Great stuff, merci! Nous ajoutons notre touchmove auditeur à l'intérieur de la touchstart gestionnaire, et pour une raison quelconque, il semble que je dois annuler que, même ainsi (avec preventDefault) pour obtenir le touchmove pour annuler, même avec un passif éteint. Avec les deux { passive: false } et la touchstart et touchmove des événements à la fois annulé après que nous nous occupons d'eux, il semble fonctionner à merveille.
    Grande, mais je me demande comment vous faites cela dans la Réaction?
    Est-il possible d'activer le défilement dans certains div seulement à l'intérieur du document après l'application de ce code? @user9576791
    Comment puis-je supprimer cet écouteur d'événement sur clic à partir d'une page? @user9576791
    Sympa, mais le problème maintenant est que vous n'êtes pas du défilement de la page.

    OriginalL'auteur user9576791