Jak wyłączyć przewijanie w pionie w iOS przy użyciu pliku Hammer.js?

Question

Próbuję wyłączyć przewijanie w pionie w iOS przy użyciu pliku Hammer.js (wersja jQuery) na przewijanej poziomo liście. Próbowałem tego:

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

Ale to nie działa. Jak więc wyłączyć przewijanie w pionie, nadal będąc w stanie przewijać w poziomie?

Answer 1

Zrobiłem to za pomocą 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); 
     } 
}); 

Oto podane documentation

[EDIT]

Moja odpowiedź była tylko po to, aby poinformować cię, że używasz niewłaściwego zdarzenia.preventDefault(). W rzeczywistości użyłeś także niewłaściwej składni do sprawdzenia kierunku zdarzenia. Powinieneś być w stanie zarządzać go w ten sposób, choć nie testowałem go:

$(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 rzeczy są zmieniane: event.gesture.direction i event.gesture.preventDefault(); Event.direction był sposobem, aby zrobić to na starszych wersjach młota js.

Uwaga: jeśli chcesz zrobić coś za pomocą zdarzenia machnięcia, na przykład: przeskocz większą ilość w poziomie podczas przesuwania, możesz połączyć moje odpowiedzi.

Answer 2

Młot (document.body, {prevent_defaults: true});

Answer 3

sprawdź na tej stronie:

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

Spróbuj to zakładając, że $ jest jQuery i używasz wersji jQuery z 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

Można użyć drag_block_vertical opcję wyłącz przewijanie pionowe:

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

Nazywasz go również elementem body, który zawsze powinien istnieć. Z tego powodu, prawdopodobnie można uprościć do:

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