Javascript 为什么JQuery mobile固定页脚如此糟糕？

JQuery移动页脚未正确固定在屏幕底部。在正常的行为中，它们跟随底部而滞后。在大多数情况下，它仍然是相当多的bug（它不会显示在屏幕底部）

我的问题是为什么会这样

考虑到：

• 对于现代浏览器和CSS，解决方案似乎运行得很好（位置：绝对， 底部：0px）。我猜有些导航员不支持这个？哪一个？为什么会这样 那个
• Sencha touch似乎为页脚案例提供了更好的选择。但秘密是什么？它与所有浏览器兼容吗
• 在回答这个问题时，Jquery处于.rc1位置。在JQuery mobile 1.0版本中可能无法修复该问题。（）

---

来自发行说明：

iOS5：显著改进页面转换和真正的固定工具栏

团队花了大量时间努力改进 过渡和固定工具栏，因为我们知道它们很重要 为开发人员提供功能。在花了几百个小时的工作之后 我们现在相信，实现实质性， 这些领域的跨平台改进只能在移动 平台开始本机支持溢出属性。 基于JavaScript的momentum scroller脚本太重，没有响应 而狭隘的相容性则是前进的方向

这就是为什么我们对iOS5感到非常兴奋的原因 触摸目标版本的溢出：自动，并适当支持 位置：固定，允许使用 本机动量滚动与CSS。在Beta 3中，我们添加了一个 增强层利用这些新的CSS功能 使我们能够带来真正的“固定”工具栏和超级平滑 iOS5中的转换，都是通过使用web标准实现的，很少 附加代码

---

有一些JavaScript可滚动内容插件，您可以使用这些插件创建一个不吸引人的固定页脚：

• iScroll->
• 滚动视图->
• Flexcroll->

我相信还有更多，但这三个我已经取得了一些成功。我已经决定亲自使用iScroll

要获得一个好的固定页脚，您可以将页眉设置为

位置：绝对

和

顶部：0

，将页脚设置为

位置：绝对

和

底部：0

，然后将内容区域设置为

位置：绝对

，

顶部：

和

底部：

我发现的一个问题是，将文档设置为100%高度将不允许将地址栏滚动到视图之外。为了解决这个问题，当

窗口

对象上触发

加载

事件时，我将文档的高度设置为比屏幕高度高100px（

window.innerHeight

）。然后我滚动到页面顶部（

$.mobile.silentcroll（0）

），并设置超时以将文档高度重置为100%

$(window).bind('load', function () {
    $.mobile.activePage.css({
        height       : (window.innerHeight + 100) + 'px',
        'min-height' : (window.innerHeight + 100) + 'px'
    }).find('[data-role="footer"]').css({
        bottom : '100px'
    });
    $.mobile.silentScroll(0);
    setTimeout(function () {
        $.mobile.activePage.css({
            height       : '100%',
            'min-height' : '100%'
        }).find('[data-role="footer"]').css({
            bottom : '0px'
        });
        if ($.mobile.activePage[0].id in myScroll) {
            myScroll[$.mobile.activePage[0].id].refresh();
        }
    }, 750);
});

上述例子：

将当前伪页面的高度更改为比屏幕高度高100px

更改页脚的位置，使其在整个过程中保持在视图中

滚动到页面顶部（即，将地址栏滚动到视图之外）

设置超时以将当前伪页的大小重新调整为100%高度并重置页脚的位置。需要超时，以便在高度重置为100%之前进行滚动

我在这段代码中使用了iScroll，并将每个iScroll实例保存在一个数组中，这样每当我对影响可滚动区域大小的DOM进行更改时，我都可以刷新iScroll内容区域

每当发生方向更改时，我还会在窗口对象上触发加载事件：

$(window).bind('orientationchange', function () {
    $(window).trigger('load');
});

---

我正在使用Jquery.mobile1.2alpha，似乎不再是一个问题了。

数据位置-“固定”

非常有效

<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
    <ul>
        <li><a href="#" onclick="$.mobile.changePage('/url/1');">Url 1</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/2');">Url 2</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/3');">Url 3</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/4');">Url 4</a></li>
    </ul>
</div>
</footer>

如果您正在开发包装器应用程序，还建议禁用“webview反弹”。

---

适合我的固定页脚解决方案：

<div data-role="footer" data-position="fixed" style="position: absolute">

我认为这个问题最好在jQuery移动论坛上提出。@Josh：这不是一个通用编程/软件开发论坛吗？@ShamimHafiz-是的，但是有更好的机会从在专用网站上编写代码的人那里得到答案。这不是一个关于通用用途的问题。。。这是一个关于框架实现细节的具体问题。