android - 修复了 jQuery Mobile 中的标题滚动/拖动

Question

我正在使用 jquery mobile 和 phonegap 开发移动网络应用程序。我开发了一个 Hello World 应用程序。它有页眉、页脚和内容区域。页眉和页脚使用 data-position="fixed" 属性固定。但是页眉和页脚的问题是，当我向下滚动并且内容完成并且不再需要滚动时，它的页眉会向下拖动(为了灵 active 或指示并且没有更多内容)。与其他 iOS 应用程序一样，此功能存在，但在这些应用程序中，页眉和页脚不会上下拖动，内容区域只会拖动。请看图片我的意思

如上图所示，标题被拖向我不想要的底部。我只希望内容区域具有此功能。我怎样才能做到这一点，以便仅在没有更多内容可供查看时才拖动内容区域？

有什么帮助 css、jquery 或 jquery 移动技巧吗？

更新

这里是HTML代码

<div data-role="page">

        <div data-role="header" id="header" data-position="fixed">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="contents">
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

Answer 1

如果您使用的是 Cordova >=2.6，请将此行添加到您的 config.xml 文件中

<preference name="DisallowOverscroll" value="true" />

该选项过去称为 UIWebViewBounce，因此如果您使用的是旧版本，则需要在 config.xml 中添加这一行:

<preference name="UIWebViewBounce" value="false" />