CODEWITHSUNDEEP
htmlioscsscordova
Kumar
Kumar

Reputation: 31

Jquery Mobile scrolling and header issue in iOS

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?

Upvotes: 0

Views: 516

Answers (2)

Mike M
Mike M

Reputation: 4436

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";

Upvotes: 0

phemt.latd
phemt.latd

Reputation: 1803

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>

Upvotes: 0

Related Questions