4

我正在使用 jquery mobile 和 phonegap 开发移动网络应用程序。我开发了一个 hello world 应用程序。它有页眉、页脚和内容区域。页眉和页脚使用data-position="fixed"属性固定。但是页眉和页脚的问题是，当我向下滚动并且内容完成并且不再需要滚动时，它的页眉会向下拖动（为了灵活性或指示并且没有更多内容）。与其他 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 -->
4

7 回答 7

7

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

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

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

<preference name="UIWebViewBounce" value="false" />
于 2013-08-17T03:27:31.137 回答
6

不幸的是，您的示例不起作用，因为iOS不允许您这样做。

解决方案 1 - iOS 和 Android

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

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

我不能让你成为一个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还可以解决另一个问题。假设您已经滚动到页面底部，并且有一个按钮可以转到另一个页面。当您单击它时，通常页面会跳转到顶部，然后页面才会转换到另一个页面。这不是错误，这正是视点的工作原理。但是 tnx 到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 的更多信息，以及它们如何与工作示例一起工作，请查看这篇文章。

于 2013-05-04T19:25:36.650 回答
3

将 data-tap-toggle="false" 添加到页眉/页脚也应该可以解决问题，例如

<div class="header" data-role="header" data-position="fixed" data-tap-toggle="false">
于 2014-03-26T07:04:14.990 回答
2

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

于 2013-07-11T10:27:47.043 回答
0

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

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

于 2013-07-12T18:00:20.070 回答
0

我为此苦苦挣扎了很长时间，这对我来说真的很有效，包括初始化应用程序的位置：

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

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

于 2013-08-27T12:05:27.583 回答
0

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

<div data-role="header" data-position="fixed" style="overflow:scroll;">
于 2015-05-29T08:33:55.627 回答