Hammer js - close the swipe menu to the right - vertical swipe intervention

Question

I want to scroll right to close my menu. I want users to be able to scroll up and down on my menu, given that the menu can be long on a mobile device.

However, if you swipe up or down and pull a little to the right, it closes the menu.

http://codepen.io/ashconnolly/pen/gpBLPp/

$('.menu_toggle').click(function (event) { $('.menu').toggleClass('active'); }); new Hammer(document.getElementById('menu')).on("panright", function(ev) { $('.menu').removeClass('active'); }); 

Is there an easy way around this? I almost want the threshold to become apparent.

As a simple calculation, the distance traveled to the right is greater than the distance traveled vertically = swipe to the right. Hope you can help!

Answer 1

You can use swipe events. Hammer JS provides a clear separation between scrolling up / down / right / left. You can set a higher threshold for the correct scroll event if you want to avoid it when scrolling vertically.