0

I am implementing app using Phonegap and JQuery Mobile, that app working Perfectly in Android, but in iOS problem with single finger scrolling and header footer issues. Firstly, when I add this code I lose single finger scrolling. The headers seem to be fixed in place, How can I make it so that the header + footer don't move when I scroll?

 body {
   -webkit-overflow-scrolling: touch;    
 }

How do I prevent header and footer scrolling?

2 Answers 2

0

try to modify the viewport as follow:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

From the default i've remove the height.

Then add in your config.xml:

<preference name="DisallowOverscroll" value="true" />

If you want you can limit it to iOS:

<platform name="ios">
    <preference name="DisallowOverscroll" value="true" />
</platform>
1
  • I modified with above code and tested but not working getting same issue.
    – Kumar
    May 11, 2015 at 8:18
0

You will have to explicitly set the size of the div that you want to be independently scrollable. This has to occur after the page has been created. Something like:

    // sizes the div for independent scrolling
    var divRect  = myDiv.getBoundingClientRect();

    myDiv.style.height = document.body.clientHeight-divRect.top +"px";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.