Hammer.js swipe stop vertical scroll ipad

Question

I am developing a swipe page functionality where i use hammer's swiperight and swipeleft events to swipe between section which works. However on touch devices (ipad), when you swipe, it scrolls horizontally as well which is very annoying. Due to this, when i use jquery .animate(), the animation sometime its not smooth ie it jumps directly to next/prev page instead of the animate. My code is below

is there a way to stop ipad horizontal scroll when swiping? I know eventDefault() does but it doesnt work for me

      Hammer(array[i]).on("swipeleft", function(e) {
//e.preventDefault(); -- this doesnt work :(
        if(!$(this).next().length){
          console.log("no more pages to right");
        }
        else{
          $(this).next().animate({
              marginLeft:"auto"
          },{duration:500,queue:false});

          $(this).animate({
            marginLeft:"-" + windowWidth + "px"
          },{duration:300,queue:false});
        }
      });

      Hammer(array[i]).on("swiperight", function() {
        if(!$(this).prev().length){
          console.log("no more pages to left");
        }
        else{
          $($(this)).animate({  
            marginLeft:windowWidth+"px"
          },{duration:300,queue:false}); 

          $($(this).prev()).animate({
              marginLeft:"0px"
          },{duration:400,queue: false});
        }
      });

Answer 1

Well after researching into the docs ( https://github.com/EightMedia/hammer.js/wiki/Tips-&-Tricks ), i found out about e.gesture.preventDefault(). So i applied this to the container in which the section are.

  $("#container").on("dragright dragleft",function(e){
    e.gesture.preventDefault();
  });