Phonegap textarea scrolling

Question

I have a phonegap app where I have disabled the scrolling of the webview by applying document touch move and prevent.default();

The problem is that I have two text areas that I would like to scroll if the text overflows. The prevent default interferes with this.

I've tried several work arounds with mixed results and the best so far being the following function to detect the x and y of the touch move event and only applying prevent default if it falls outside of the text areas.

function preventBehavior(e) 
{ 
    console.log("event.targetTouches[0].pageX = " + event.targetTouches[0].pageX + " event.targetTouches[0].pageY = " + event.targetTouches[0].pageY);

    var x = event.targetTouches[0].pageX;
    var y = event.targetTouches[0].pageY;

    //fix the scroll of textareas for iOS by avoiding prevent default in them 
    if (x > 20 && x < 300 && y > 80 && y < 230){
        //touch falls within first text area
    }else if (x > 20 && x < 300 && y > 245 && y < 400){
        //touch falls within second text area
    }else{
        e.preventDefault(); 
    }
};
document.addEventListener("touchmove", preventBehavior, false);

The problem now is that if the text area does not require scrolling then it scrolls the entire web app.

Does anyone has a definitive fix for this problem?

Thanks in advance.

Answer 1

You can use iscroll.js if u only want text field scrolling. it also works find with desktop web browsers.