document.addEventListener("touchmove", preventBehavior, false); - prevents me using from using overflow: scroll; - work around?

Question

Im using phonegap to build an ios app, so that you cant move the window phonegap uses document.addEventListener("touchmove", preventBehavior, false);

which is fine... but it also prevent me from using the css overflow:scroll on a section of text.

Is there a work arround that i can get both of these to still work ? is there a way i could load in the section of css after the js so that it overrides it ? or can i just apply the document.addEventListener("touchmove", preventBehavior, false); to the body but not its content ?

Solution 1

Found a phonegap / cordova only work around that dosnt require you to use document.addEventListener("touchmove", preventBehavior, false); in the first place - go into your xcode project.. porject file > supporting files > cordova.plist then at the top change 'UIWebViewBounce' to NO.

from here

Solution 2

I think you can detect the target element when "touchmove":

document.addEventListener("touchmove", function(event) {

    if (event.target.tagName != "TEXTAREA") { // Element that you don't want to be prevented default event.

          event.preventDefault();
    }
});

Solution 3

To capture all the scrolling pixels you can write

document.addEventListener("touchStart",<method>,true/false)
document.addEventListener("touchMove",<method>,true/false)
document.addEventListener("touchEnd",<method>,true/false) 

Have you added touchEventListener in body load function ? If you write event.preventDefault(); It will kill the event behavior that is the reason why your overflow:scroll property is not working.

Comments

[Kevin]

fyi window.addEventListener 'touchmove' - not document

[sam]

do i define the element "TEXTAREA" using css hooks ? ie. #detail-content

[Carl]

link broken, please fix