Désactiver le défilement lorsque le toucher déplace certains éléments

Question

J'ai une page avec une section pour esquisser un dessin. Mais les événements touchmove, du moins les événements verticaux, font également défiler la page (ce qui dégrade l'expérience de dessin) lorsque je l'utilise sur un navigateur mobile. Existe-t-il un moyen de : a) désactiver et réactiver le défilement de la page (de façon à pouvoir le désactiver au début de chaque ligne, mais le réactiver une fois la ligne terminée), ou b) désactiver la gestion par défaut des événements touchmove (et vraisemblablement le défilement) qui vont vers le canevas dans lequel le croquis est dessiné (je ne peux pas les désactiver complètement, car le croquis les utilise) ?

J'ai utilisé des gestionnaires de vmouse jquery-mobile pour le sketch, si cela fait une différence.

Mise à jour : Sur un iPhone, si je sélectionne le canevas à dessiner, ou si je maintiens simplement mon doigt un peu avant de dessiner, la page ne défile pas, et pas à cause de quelque chose que j'ai codé dans la page.

Answer 1

À ma grande surprise, la méthode "preventDefault()" fonctionne pour moi sur la dernière version de Google Chrome (version 85) sur iOS 13.7. Elle fonctionne également sur Safari sur le même appareil et sur ma tablette Android 8.0. Je suis en train de l'implémenter pour la vue 2D sur mon site ici : https://papercraft-maker.com

Answer 2

Essayez d'utiliser la fonction overflow hidden sur l'élément que vous ne voulez pas faire défiler pendant que l'événement tactile se produit. Par exemple, mettez overflow hidden au début et remettez-le en mode automatique à la fin.

Avez-vous essayé ? Je serais intéressé de savoir si cela fonctionne.

document.addEventListener('ontouchstart', function(e) {
    document.body.style.overflow = "hidden";
}, false);

document.addEventListener('ontouchmove', function(e) {
    document.body.style.overflow = "auto";
}, false);

Answer 3

J'ai trouvé que ev.stopPropagation(); a fonctionné pour moi.