Jquery touchmove event restrict to one axis

Jquery touchmove event restrict to one axis

I have a mobile javascript/jquery app that uses touchmove through jquery for scrolling purposes. The entire page scrolls to show additional content when its swiped left and right. But when a menu item from the bottom is selected i need to freeze the page and just make the details pop up scrollable.

I am doing that fine right now with the following.

$("body").bind('touchmove', function (e) { e.preventDefault(); }); $('#detailsTextContainer').bind("touchmove", function (e) { e.stopPropagation(); }); 

and to u

$("body").unbind('touchmove'); $("#detailsTextContainer").unbind("touchmove"); 

So when I swipe left and right outside of the detail overlay nothing happens which is good ... the page is locked ... when i scroll up and down in the text area the scroll behaves normally.

The problem is when swipe left and right ON the text area the entire page moves instead of being locked into place.

My question is is there a way to allow vertical scrolling of the text in the details view but not allow side to side swiping of the element therefore stopping the whole page from scrolling.


    • Topic Participants

    • rez