problem with scroll/touch events, page scrolling, & fixed overlay div
Im new to jqm.
Ive run into an issue with page scrolling/touch events on android/mobile browser.
Here's my demo page
It's best to view it on a mobile device in order to clearly see the issue that Im describing...
Im running it on a galaxy S3, jellybean 4.1.1, and Ive tried it both on chrome and the stock samsung browser.
background:
In my jqm page layout, I have a 'collapsible, fixed footer div / toolbar' that Im creating 'from scratch' / Im not using jqm or including it within a jqm 'page' div (there are reasons for doing it this way that are related to an external javascript app, so there's no way around it).
Upon clicking the footer, the desired action is for the footer to expand & cover the entire page (i.e., an upward slide panel). Within the slide panel, there will be a scrollable listview (css overflow hidden, overflow-y scroll) & other misc. form controls.
The underlying 'jqm page' will consist of a standard, yet relatively 'long' jqm linked listview ('long' in the sense that it will be big enough to cause vertical page scrolling of the entire 'jqm page' div, i.e., the document body).
The problem:
Any touch and/or scroll events triggered over the footer div or any of its child elements will also fire on the underlying jqm page, and the page body will scroll. This happens even when the 'footer slide panel' is open / expanded, thus completely covering the entire page. This is a problem because the user's 'position' within the underlying listview is lost, and, more importantly, it breaks scrolling over the 'child ul list' within the slide panel.
All of this can clearly be seen by opening the demo page in a mobile browser (it is also evident when using a mousewheel, but it isn't as obvious). open up the footer 'slide panel,' try scrolling/swiping anywhere over the slide panel or its child ul list...the underlying page body should scroll as well (again, this is NOT the desired result). The scrolling *kind of* works in the dolphin android browser, the ul list scrolling is not completely broken, yet the issue is still there.
The question:
How can this be fixed?
I took a look at the jqm source code, and there's definitely alot of stuff going on involving scroll & touch events, so if this is an issue/bug with jqm itself, please confirm and provide a patch/work-around. Im hoping someone more knowledgeable about how jqm handles the scroll & touch events can chime in and explain why this is happening...
Basically, I want to 'stopPropagation()' of the scroll/touch events so that they 'dont leave the footer div', i.e. so that they wont fire on the underlying jqm 'page' div.
FYI, I tried setting 'position:fixed' and 'overflow:hidden' on the body and/or page divs, but its a crappy hack that doesnt work very well; it was severly slowing down transitions/animations, and also causes the body to 'scroll to top' and lose the user's position within the main content div's scrollable listview.