Wie deaktiviere ich vertikales Scrollen in iOS mit Hammer.js?

Question

Ich versuche das vertikale Scrollen in iOS mit Hammer.js (jQuery-Version) in einer horizontal scrollenden Liste zu deaktivieren. Ich habe es versucht:

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

Aber es funktioniert nicht. Also, wie deaktiviere ich den Scroll vertikal, während ich immer noch horizontal scrollen kann?

Answer 1

ich es tat das event.gesture.preventDefault mit:

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

Hier ist die documentation

[EDIT]

gegeben

Meine Antwort war nur, um Sie wissen zu lassen, dass Sie das falsche Ereignis verwendet haben. PreventDefault(). Tatsächlich haben Sie auch die falsche Syntax verwendet, um die Ereignisrichtung zu überprüfen. Sie sollten in der Lage sein, es auf diese Weise zu verwalten, obwohl ich es nicht getestet haben:

$(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 Dinge geändert: event.gesture.direction und event.gesture.preventDefault(); Die event.direction war der Weg, dies auf älteren Versionen von hammer js zu tun.

Hinweis: Wenn Sie etwas mit dem Swipe-Event machen möchten, zum Beispiel: Wenn Sie beim Swiping einen größeren Betrag horizontal springen, können Sie meine Antworten kombinieren.

Answer 2

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

Answer 3

Schauen Sie sich diese Seite:

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

Versuchen Sie dies unter der Annahme, Ihre $ ist jQuery und Sie werden mit dem jQuery-Version von 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

Sie die drag_block_vertical Option verwenden können, um vertikales Scrollen deaktivieren:

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

Sie rufen es auch auf dem body-Element auf, das immer existieren sollte. Aus diesem Grund könnten Sie wahrscheinlich vereinfachen:

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