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

Définissez le action tactile La propriété CSS de none qui fonctionne même avec Écouteurs d'événements passifs :

touch-action: none;

L'application de cette propriété à un élément ne déclenchera pas le comportement par défaut (défilement) lorsque l'événement provient de que élément.

Answer 2

Nota: Comme l'a signalé @nevf dans les commentaires, il se peut que cette solution ne fonctionne plus (du moins dans Chrome). en raison des changements de performance . La recommandation est d'utiliser touch-action ce qui est également suggéré par @JohnWeisz's réponse .

Comme pour la réponse donnée par @Llepwryd, j'ai utilisé une combinaison de ontouchstart y ontouchmove pour empêcher le défilement lorsqu'il se trouve sur un certain élément.

Pris tel quel d'un de mes projets :

window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
    if ($(e.target).closest('#mobileMenuHeader').length == 1)
    {
        blockMenuHeaderScroll = true;
    }
});
$(window).on('touchend', function()
{
    blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
    if (blockMenuHeaderScroll)
    {
        e.preventDefault();
    }
});

Essentiellement, ce que je fais, c'est écouter le début du toucher pour voir s'il commence sur un élément qui est l'enfant d'un autre en utilisant jQuery. .closest et l'autoriser à activer/désactiver le mouvement tactile lors du défilement. Le site e.target fait référence à l'élément par lequel commence la touche.

Vous voulez empêcher le défaut sur l'événement de déplacement tactile, mais vous devez également effacer votre drapeau pour cela à la fin de l'événement tactile, sinon aucun événement de défilement tactile ne fonctionnera.

Ceci peut être accompli sans jQuery, mais pour mon utilisation, j'avais déjà jQuery et je n'avais pas besoin de coder quelque chose pour savoir si l'élément a un parent particulier.

Testé dans Chrome sur Android et un iPod Touch à partir de 2013-06-18

Answer 3

Il existe un petit "hack" sur CSS qui permet également de désactiver le défilement :

.lock-screen {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

L'ajout de cette classe au corps empêchera le défilement.

Answer 4

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

Cela devrait empêcher le défilement, mais brisera également d'autres événements tactiles, à moins que vous ne définissiez une manière personnalisée de les gérer.

Answer 5

La solution ultime serait de mettre overflow: hidden; en document.documentElement así:

/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
    document.documentElement.style.overflow = 'hidden';
});

document.addEventListener('touchend', function(e) {
    document.documentElement.style.overflow = 'auto';
});

En fixant overflow: hidden au début de la touche, tout ce qui dépasse la fenêtre est caché, ce qui supprime la possibilité de faire défiler quoi que ce soit (aucun contenu à faire défiler).

Après touchend le verrou peut être libéré en mettant overflow a auto (la valeur par défaut).

Il est préférable de l'ajouter à <html> parce que <body> peut être utilisé pour faire du stylisme, et il peut faire en sorte que les enfants se comportent de manière inattendue.

EDIT : A propos de touch-action: none; - Safari ne le prend pas en charge selon MDN .