Come disabilitare lo scorrimento verticale in iOS utilizzando Hammer.js?

Question

Sto provando a disabilitare lo scorrimento verticale in iOS con Hammer.js (versione jQuery) in un elenco a scorrimento orizzontale. Ho provato questo:

$(document).hammer().on('swipe,drag', 'body', 
    function(event) 
    { 
     if (event.direction == Hammer.DIRECTION_UP || event.direction == Hammer.DIRECTION_DOWN) 
     { 
      event.preventDefault(); 
     } 
    } 
); 

Ma non funziona. Quindi, come posso disabilitare lo scroll verticalmente pur essendo in grado di scorrere orizzontalmente?

Answer 1

l'ho fatto con l'event.gesture.preventDefault:

$('#horizontalCarousel').hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) { 
     event.gesture.preventDefault(); 
     if(event.type == "swipe"){ 
      swipeAction(event); 
     } else { 
      dragAction(event); 
     } 
}); 

Qui è la data documentation

[EDIT]

La mia risposta era solo per farti sapere che stavi usando l'event.preventDefault() errato. In effetti hai anche usato la sintassi sbagliata per controllare la direzione dell'evento. Dovreste essere in grado di gestire in questo modo, anche se non ho provato:

$(document).hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) { 
      if (event.gesture.direction == Hammer.DIRECTION_UP || event.gesture.direction == Hammer.DIRECTION_DOWN){ 
       event.gesture.preventDefault(); 
      } 
    }); 

2 cose sono cambiate: event.gesture.direction e event.gesture.preventDefault(); L'event.direction era il modo di farlo su versioni precedenti di hammer js.

Nota: se si desidera fare qualcosa con l'evento di scorrimento, ad esempio: salta una quantità maggiore in senso orizzontale quando si scorre, è possibile combinare le mie risposte.

Answer 2

Martello (document.body, {prevent_defaults: true});

Answer 3

Guarda cosa:

https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults#evgesturestoppropagation

Prova questo supponendo tuo $ è jQuery e si utilizza la versione di jQuery di hammer.js

$('body').hammer().on('touch', function(ev){ 
     var $t = $(ev.target); //let's you know the exact element you touched. 
     if(ev.gesture.direction === 'left' || ev.gesture.direction ==='right'){ 

     } else { 
      ev.gesture.preventDefault(); 
     } 
}); 

Answer 4

È possibile utilizzare l'opzione drag_block_vertical a disabilitare lo scorrimento verticale:

$(document).hammer({drag_block_vertical: true}).on('swipe,drag', 'body', function(event){ 
    // etc 
}); 

Inoltre, lo stai chiamando sull'elemento body, che dovrebbe sempre esistere. Per questo motivo, probabilmente si potrebbe semplificare a:

$('body').hammer({drag_block_vertical: true}).on('swipe,drag', function(event){ 
    // etc 
});