解决方案1 - iOS和Android

Question

我正在使用jquery mobile和phonegap处理移动网络应用。我开发了一个hello world app。它有页眉，页脚和内容区域。使用data-position="fixed"属性修复页眉和页脚。但是页眉和页脚的问题是，当我向下滚动并且当内容完成并且不再需要滚动时，其标题向下拖动（为了灵活性或指示并且没有更多内容）。与其他ios应用程序一样，此功能仍然存在，但在这些应用程序中，页眉和页脚不会在内容区域上下拖动。请看图片我的意思

enter image description here

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

任何帮助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＆gt; = 2.6

，请将此行添加到config.xml文件中

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

该选项以前称为UIWebViewBounce，因此如果您使用的是旧版本，则需要在config.xml中使用此行：

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

Answer 2

不幸的是，您的示例无效，因为 iOS 不允许您这样做。

解决方案1 - iOS和Android

值得庆幸的是，有一个第三方jQuery Mobile插件可以帮助您解决这个问题，它就像一个魅力。这是iOS和Android解决方案。

您需要的是基于 iScrollView 插件制作的 iScroll 插件。

我不能让你成为 jsFiddle 的例子，因为它不适用于 iScrollView ，至少我不能让它工作所以这里有一个例子，你可以只复制到新的HTML文件中并在 iOS 上试用。

首先，这是我做的一个在线工作示例： http://www.fajrunt.org/

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Demo</title>

    <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
    <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />   

    <script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
    <script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>    
    <script src="http://www.fajrunt.org/js/iscroll.js"></script>
    <script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script> 
</head>

<body>
    <div data-role="page" class="index-page">

    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
        <h1>INDEX PAGE</h1>
    </div>

    <div data-role="content" class="example-wrapper" data-iscroll>
        <p>some content that will be scrolled</p>
        <p>Some more content that will be scrolled</p>
        <ul data-role="listview">
        <li>Item 1</li>
        <li>Item 2</li>
        </ul>
        <p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
        <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>
        <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>
        <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>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
        <h1>My Footer</h1>
    </div>

    </div>
</body>
</html>

正如你所看到的，这个例子就像魔法一样。还有一件事，如果您不知道 iScrollview 还可以解决另一个问题。假设您已滚动到页面底部，并且有另一页的按钮。当您单击它时，页面将跳转到顶部，然后页面将转换到另一个页面。这不是错误，这只是视点的工作原理。但是，对于 iScrollView ，您的页面将从该点开始转换，当您返回时，您的页面仍将处于相同的位置。

如果您是iOS开发人员，最后一件事 iScrollView 与 UIScrollView 没有任何关系。

解决方案2 - 仅限iOS

对你的问题有一个纯粹的CSS修复，但它只适用于iOS，这是我将其作为第二个解决方案展示的方式。

这也不是我的解决方案，官方网页可以在这里找到：http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

通过一些页面更改，您可以使用jQuery Mobile启动iOS页面滚动。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Scrollable Content Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery Mobile styles -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <!-- Fix for scrolling on iOS prior to iOS 6 -->
    <style type="text/css">
        body {
            margin: 0;
        }

        div#container {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
        }

        div[data-role="header"] {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

        div[data-role="content"] {
            position: absolute;
            top: 41px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .scrollable {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

            /* iOS specific fix, don't use it on Android devices */
        .scrollable > * {
            -webkit-transform: translateZ(0px);
        }
    </style>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).one('mobileinit', function () {

            // Setting #container div as a jqm pageContainer
            $.mobile.pageContainer = $('#container');

            // Setting default page transition to slide
            $.mobile.defaultPageTransition = 'slide';

        });
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
<div id="container">

    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Scrollable Content</h1>
        </div>

        <div data-role="content" class="scrollable">
            <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>
            <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>
            <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>
        <div data-role="footer" data-position="fixed">
            <h1>Footer</h1>
        </div>      
    </div>

</div>
</body>
</html>

最后一个问题

关于你的第二个问题。当你最终到达底部或者如果你在页面的顶部，你将无法防止弹跳。只有这样才能防止弹跳，如果你阻止滚动。在您的情况下，这不是选项，您需要滚动才能访问页面底部。

最后的笔记

如果您想了解有关iScroll + iScrollView的更多信息，以及它们如何使用工作示例，请查看此article。

Answer 3

添加数据 - tap-toggle =＆＃34; false＆＃34;页眉/页脚也应该做到这一点，例如

<div class="header" data-role="header" data-position="fixed" data-tap-toggle="false">

Answer 4

使用iScrollView的示例代码不起作用。我复制并粘贴了上面的示例html页面和运行ICS的android htc one x设备以及运行2.3的HTC欲望，滚动时页眉和页脚消失了。

Answer 5

我在使用phonegap（2.9.0）和编译Android（4.1.2）时遇到同样的问题，但在其他平台上却没有。

最合理的解决方案是不在该平台上使用固定属性。

Answer 6

我多年来一直在努力解决这个问题，这对我很有帮助，包括初始化应用程序的地方：

$("body").fixedtoolbar({ tapToggle: false });

请参阅此处的完整讨论： https://forum.jquery.com/topic/is-this-really-so-difficult-full-screen-non-scrolling-page-with-header-and-footer

Answer 7

只需在页眉和页脚标记中添加溢出：滚动：

<div data-role="header" data-position="fixed" style="overflow:scroll;">

固定标题在jquery mobile中滚动/拖动

7 个答案:

解决方案1 - iOS和Android

解决方案2 - 仅限iOS

最后一个问题

最后的笔记

固定标题在jquery mobile中滚动/拖动

7 个答案:

解决方案1 ​​ - iOS和Android

解决方案2 - 仅限iOS

最后一个问题

最后的笔记

解决方案1 - iOS和Android