Prevent div scrolling when swiping down or up in a region of the screen

Oct 4, 2013 at 9:49 AM
Edited Oct 4, 2013 at 9:51 AM
I am writing a phonegap Android app.
I have 3 divs:
  1. DIV1 contains standard html (<p>, <span> etc.) and uses the full height of the screen. When content in this div overflows, one can scroll up or down simply by swiping the screen.
  2. DIV2 is 150px high and is fixed to the top of the screen. This is the DIV which reacts to a jGesture swipe up or down. It is transparent. For example, I am using
jQuery('#swipe').bind('swipedown',swipeDownTest);
  1. DIV3 is inside DIV2 and is a 70px high menu bar which slides down on swipedown, swipeleftdown or swiperightdown. It slides back up on swipeup, swipeleftup or swiperightup. I am using CSS transition to move the menu bar down and up.
It works great but I have one issue. When I swipe in DIV2 to call the menu down (swipeDownTest) or up (swipeUpTest), the content of DIV1 also scrolls. This makes sense as I am swiping over both DIVs at the same time.

Is there a way to only scroll DIV1 below 150px?

I have tried using
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
in the function which brings the menu down but this is too late. I just want DIV1 not to scroll when I call the menu functions. When the menu is hidden, I am happy for DIV1 to scroll.

Is there an easier way to do what I am doing?
Oct 5, 2013 at 6:31 PM
You can do that through CSS. Nothing special needs to be done for gestures. You class for the inner div that you want to scroll needs the following.

position: absolute
overflow-y: auto
overflow-x: hidden

That's why I do on feedsanywhere.com so the menus will scroll correctly on a small phone screen. Good luck.