那些遇到过的问题

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

Om3*_*3ga 4 jquery android ios jquery-mobile iscrollview

我正在使用jquery mobile和phonegap开发移动网络应用程序.我开发了一个hello world app.它有页眉,页脚和内容区域.页眉和页脚使用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 -->
Run Code Online (Sandbox Code Playgroud)

nsi*_*ide 7

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

<preference name="DisallowOverscroll" value="true" />
Run Code Online (Sandbox Code Playgroud)

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

<preference name="UIWebViewBounce" value="false" />
Run Code Online (Sandbox Code Playgroud)

Gaj*_*res 6

不幸的是,你的例子不会起作用,因为iOS不会允许你.

解决方案1 ​​ - iOS和Android

值得庆幸的是,有一个第三方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>
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,这个例子就像魔法一样.还有一件事,如果您不知道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>
Run Code Online (Sandbox Code Playgroud)

最后一个问题

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

最后的笔记

如果您想了解有关iScroll + iScrollView的更多信息,以及它们如何使用工作示例,请查看本文.

归档时间：

查看次数：

14588 次

最近记录：

11 年，3 月 前
相关归档
从android中的上下文获取活动 169
为片段设置主题 103
Https Connection Android 99
以名字命名 75
如何解决警告:将'ViewController*const __strong'发送到不兼容类型'id <AVAudioPlayerDelegate>的参数？ 35
如何检测请求是否中止？ 33
如何从iOS swift中的约会前1小时前获得？ 33
具有多个参数的objective-c switch case 22
Swift:使按钮触发segue到新场景 21
jQuery Mobile selectmenu焦点和模糊事件不会触发 5
难疑归档
如何从JavaScript中删除数组中的特定元素？ 7655
什么是Python中的元类？ 5409
检查shell脚本中是否存在目录 3556
如何创建一个像链接一样的HTML按钮？ 1769
如何在Linux中更改echo的输出颜色 1582
你什么时候使用git rebase而不是git merge？ 1461
如何离开/退出/停用python virtualenv？ 1461
如何从文件内容创建Java字符串？ 1440
Android中的gravity和layout_gravity有什么区别？ 1286
JavaScript中的(内置)方式,用于检查字符串是否为有效数字 1051