jQuery mobile scrolls the header and the footer (fixed toolabars?)

3
votes

I'm using phonegap and jqm to develop a simple application My problem is that the footer and the header are scrollable when you reach the top or bottom of the page.

If I'm at the top of the page, and I scroll up, the header gets scrolled - same for the footer (see the provided image)

I've tried iScroll but it didnt fix anything. I've tried overriding jqm css settings by setting the overflow of the body to hidden and the overflow of the .ui-content div to scroll - didnt work either.

I've also tried to set the body position to fixed. Then, when I scrolled, the body didn't move but a black screen rose from the bottom and hid the page.

Any ideas?

enter image description here

3
jqueryiphonejquery-mobilecordovawebkit
I can't see an example of what you're describing in that image.... – Jivings
the "sss" represents a jquery mobile header (data-content='header') I tapped the screen and moved my finger downward (scrolling up) and the whole paged moved, including the header. Nothing should have happened when I done this because I Was already at the top of the page. – Dror 'Yitzhakov
Ah I see. Is that iPhone specific? I've never had that happen to me before. – Jivings
i havent tried it on another platform yet seems to be ok in a desktop browser.. but you cant really "pull" the page in a desktop so i dont know – Dror 'Yitzhakov
From the screenshot, what you're experiencing is iOS bounce effect. chrishjorth.com/blog/phonegap-remove-view-scrolling-on-ios – Noogen

3 Answers

0
votes

There's a iscroll/jqm script released under MIT lic. for this...

https://github.com/yappo/javascript-jquery.mobile.iscroll

Hope this helps.

0
votes

For me iScroll do not helped. I have fixed header, i fixed it on JQM way, so it is like this:

<div data-role="header" class="basic-top" data-position="fixed" data-tap-toggle="false" data-transition="none">

And there was a long time to find a way to find good code, to recognize bottom of the page, and to load more content.

Finally i used this:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
    NameFunctionWhatCallsAjax();
   }
});

And I put this in my header:

<meta name="viewport" content="width=device-width, initial-scale=1">

It works on Iphone and other mobile devices too. I hope it will work for you too.

0
votes

Hi this attr add in your header and footer tag and use iscroll and iscrollview plugins for content. its working fine for me

data-position="fixed" data-tap-toggle="false"