0

我正在使用带有 iScroll 插件的 jQuery Mobile 开发移动网站模板。基本上我想要一个静态页脚和页眉。除了 iScroll.js，我还包括 Kazuhiro Osawa 的 jquery iScroll 脚本，以使其与 JQM 一起工作。在他的脚本中，您可以偏移 Safari Mobile 中 URL 栏的高度。问题在于页面加载后 Safari 的 URL 栏隐藏并在底部创建了一堆填充。在脚本中我可以抵消这一点，但这会杀死 Android UX。有没有人对此有任何想法或解决方案？理想情况下，我想检测设备窗口大小并执行以下操作：[设备窗口大小 - （页眉高度 + 页脚高度）] = 可滚动窗口大小。这样我就不必对特定于设备的工作进行硬编码。谢谢。

<div data-role="page" data-iscroll="enable" id="home">

      <div data-role="header">
    <h1>INDEX PAGE</h1>
      </div>

      <div data-role="content">
    <div data-iscroll="scroller">
          <ol data-role="listview">
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
      </ol>
    </div>
      </div>

      <div data-role="footer" class="ui-bar" style="height:45px">
    I'm a Footer
      </div>

    </div>

这是使用 jQuery Mobile 绑定 iScroll 的脚本

(function($) {
$(function() {

var SafariWindowHeightFix = 34; // Here is where you can offset the height of the URL bar:

function fixed(elm) {
    if (elm.data("iscroll-plugin")) {
        return;
    }

    // XXX: fix crumbled css in transition changePage 
    // for jquery mobile 1.0a3 in jquery.mobile.navigation.js changePage
    //  in loadComplete in removeContainerClasses in .removeClass(pageContainerClasses.join(" "));
    elm.css({
        overflow: 'hidden'
    });

    var barHeight = 0;
    var $header = elm.find('[data-role="header"]');
    if ($header.length) {
        $header.css({
            "z-index": 1000,
            padding: 0,
            width: "100%"
        });
        barHeight += $header.height();
    }

    var $footer = elm.find('[data-role="footer"]');
    if ($footer.length) {
        $footer.css({
            "z-index": 1000,
            padding: 0,
            width: "100%"
        });
        barHeight += $footer.height();
    }

    var $wrapper = elm.find('[data-role="content"]');
    if ($wrapper.length) {
        $wrapper.css({
            "z-index": 1
        });
        $wrapper.height($(window).height() - barHeight - SafariWindowHeightFix);
        $wrapper.bind('touchmove', function (e) { e.preventDefault(); });
    }

    var scroller = elm.find('[data-iscroll="scroller"]').get(0);
    if (scroller) {
        var iscroll = new iScroll(scroller, {desktopCompatibility:true});
        elm.data("iscroll-plugin", iscroll);
    }
}
$('[data-role="page"][data-iscroll="enable"]').live("pageshow", function() {
    fixed($(this));
});
if ($.mobile.activePage.data("iscroll") == "enable") {
    fixed($.mobile.activePage);
}

});
})(jQuery);
4

1 回答 1

0

简短的回答是，您不再需要 iScroll 在 Mobile Safari 中拥有固定的页眉和页脚（Android 从来不需要它），因为在 iOS5 中添加了 position:fixed 和 -webkit-overflow-scrolling。Mobile Tuts 写了一篇非常好的文章，详细解释了这里的变化：http: //mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/

于 2012-05-16T20:43:31.057 回答