IScroll with fixed footer and header

Question

If you enter http://gizeto.se/app_yellow/index.html , you will see that iScroll scrolls the entire page. You can see the scroller lying above the header and footer. The scroller should scroll only the content , but not include the header and footer.

I will not do this work because I need a fixed footer without using a position: fixed - that still does not work, for example, Android 2.1

I am using iScroll 4, and my JS code is inside my data-role = "content" div:

$(document).ready(function() { var myScroll = new iScroll('content'); $(window).bind('resize', function () { // I also tried setting a height on the content div, but that didn't work either. Its commented out. //$.mobile.activePage.children('[data-role="content"]').height('200px'); myScroll.refresh(); }); }); 

The data-role = "page" element has the data-iscroll = "enable" attribute, and my html code for the scrollable part:

  <div data-iscroll="scroller" class="scroller"> <div data-iscroll="scroller"> <h3>Välkommen</h3> <div style="text-align:center;"> <img src="images/video.png" style="width: 100%; height: 100px;" class="rounded" title="" /> </div> <br /> Ticker AB är en arkitekturbyrå som arbetar inom ett brett fält av projekt, från stadsplanering till bostäder via kontor och handel. Vår styrka ligger i våra idéer och vår förmåga att hitta nya, ofta oväntade lösningar som stärker platser och ökar fastigheters värde. <br /><br /> Vi följer den globala utvecklingen inom hållbar samhällsutveckling och arbetar aktivt för att integrera hållbara lösningar i alla våra projekt. </div> </div> 

Why does iScroll scroll a page with holes, not just the contents, so that my footer can remain fully fixed without using a position: fixed, which is not yet supported in all mobile browsers.

Answer 1

maybe try this widget plugin for a cleaner integration of iScroll and jQuery Mobile:

https://github.com/watusi/jquery-mobile-iscrollview

Answer 2

Currently, headers and footers cannot be committed to a jquery mobile app such as iscroller. The reason for this is that the header and footer are placed inside the jQuery mobile appication page separator, where, as in the iscroller app, the header and footer are not part of the page div. However, if we try to save the header and footer outside the page div in the jQuery mobile appication, this can lead to an error, such as disabling the text field, etc.

Answer 3

Forgive me if this is too obvious, but only because it is not included in your sample code. I thought I would ask ... have you added the identifier "content" to your data-role = "content" div? Obviously, your iscroll container should be, but the content div does not have a div id in the jqmobile documentation:

Jquery getting started

If you added this identifier (which obviously you probably have), I definitely checked the Phill Pafford comment above re using pageInit () instead of $ (document) .ready ().