带有页脚和标题的iScroll已修复

Question

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

I wan't to make this work because I need the fixed footer without using position:fixed - which still doesn't work on for example Android 2.1

I use 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();

                });
            });

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

    <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 the hole page and not just the content so that my footer can stay totally fixed without the use of position:fixed which isn't supported in all mobile browsers just yet.

Answer 1

maybe try this widget plug-in for a cleaner integration of iScroll and JQuery Mobile:

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

Answer 2

截至目前，页眉和页脚不能在像iscroller这样的jquery移动应用程序中修复。这背后的原因是页眉和页脚放在jquery移动应用程序的页面div中，在iscroller应用程序中页眉和页脚是不是页面div的一部分。但是如果我们试图在jquery移动应用程序中将页眉和页脚保持在页面div之外，则可能会导致错误，例如禁用文本框等。

Answer 3

Forgive me if this is way too obvious but just because it's not included in your code example I thought I'd ask...have you added an id of "content" to your data-role="content" div? That's obviously what your iscroll container should be, but the content div doesn't have a div id in the jqmobile documentation:

Jquery Getting Started

If you have added that id (which obv. I'm sure you probably have) I'd definitely checkout Phill Pafford's comment above re using pageInit() instead of $(document).ready().