在 jquery mobile 中固定标题滚动/拖动 [英] fixed header scrolls/drags in jquery mobile

查看：27
本文介绍了在 jquery mobile 中固定标题滚动/拖动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

任何关于 css、jquery 或 jquery 移动技巧的帮助?

更新

此处为 HTML 代码

<div data-role="header" id="header" data-position="fixed"><h1>页面标题</h1></div><!--/header --><div data-role="content" id="contents"><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1></div><!--/content --><div data-role="footer" data-position="fixed"><h4>页脚</h4></div><!--/footer --></div><!--/page -->

解决方案

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

解决方案 1 - iOS 和 Android

值得庆幸的是，有一个 3rd 方 jQuery Mobile 插件可以帮助您解决这个问题，而且它的工作原理非常棒.这是一个 iOS 和 Android 解决方案.

你需要的是一个 iScrollView 插件iScroll 插件的基础.

我不能给你一个 jsFiddle 的例子，因为它不适用于 iScrollView，至少我不能让它工作，所以这里是一个例子，你只需复制到新的 HTML 文件中，然后在您的 iOS 上试用即可.

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

HTML: 

<html lang="zh-cn"><头><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>演示</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><身体><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>索引页</h1>

<div data-role="content" class="example-wrapper" data-iscroll><p>一些将被滚动的内容</p><p>将滚动的更多内容</p><ul data-role="listview"><li>项目 1</li><li>项目 2</li><p>更多内容.它将滚动 data-iscroll div 中的任何内容.</p><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1>

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer"><h1>我的页脚</h1>

正如你所看到的，这个例子就像魔法一样.还有一件事，如果您不知道 iScrollview 还可以解决另一个问题.假设您已滚动到页面底部，并且有一个指向另一个页面的按钮.当您单击它时，通常页面会跳到顶部，然后页面才会转换到另一个页面.这不是错误，这就是视点的工作方式.但是 tnx 到 iScrollView，您的页面只会从该点过渡，当您返回时，您的页面仍将位于同一位置.

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

解决方案 2 - 仅限 iOS

有一个针对您的问题的纯 css 修复程序，但它只能在 iOS 上运行，这是我将其作为第二种解决方案展示的方式.

同样，这不是我的解决方案，可以在此处找到官方页面:http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

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

HTML:

<头><title>可滚动内容演示</title><meta name="viewport" content="width=device-width, initial-scale=1"><!-- jQuery Mobile 样式--><link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/><!-- 修复了在 iOS 6 之前的 iOS 上滚动的问题 --><style type="text/css">身体 {边距:0；}div#容器{位置:绝对；宽度:100%；顶部:0；底部:0；}div[data-role="header"] {位置:绝对；顶部:0；左:0；右:0；}div[数据角色=内容"] {位置:绝对；顶部:41px；底部:0；左:0；右:0；}.scrollable {溢出-y:滚动；-webkit-overflow-scrolling:触摸；}/* iOS 特定修复，不要在 Android 设备上使用它 */.scrollable >* {-webkit-transform: translateZ(0px);}</风格><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script type="text/javascript">$(document).one('mobileinit', function () {//将#container div 设置为 jqm pageContainer$.mobile.pageContainer = $('#container');//设置默认页面过渡到幻灯片$.mobile.defaultPageTransition = '幻灯片';});<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><身体><div id="容器"><div data-role="页面"><div data-role="header" data-position="fixed"><h1>可滚动内容</h1>

<div data-role="content" class="scrollable"><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1><h1>你好，卷云.</h1>

<div data-role="footer" data-position="fixed"><h1>页脚</h1>

最后一个问题

关于你的第二个问题.当您最终到达底部或位于页面顶部时，您将无法防止弹跳.防止弹跳的唯一方法是防止滚动.在您的情况下，这不是选项，您需要滚动以访问页面底部.

最后的笔记

如果您想了解有关 iScroll + iScrollView 的更多信息，以及它们如何处理工作示例，请查看此 文章.

I am working on mobile web app using jquery mobile and phonegap. I developed a hello world app. It has header, footer and contents area. Header and footer are fixed using data-position="fixed" attribute. But the problem with header and footer is, when I scroll down and when the contents a finished and there is not need to scroll anymore then its header drags down(for flexibility or indication and there are not more contents). As in other ios apps, this feature exists but in those apps the header and footer does not drags up and down the contents area only drags. Please see the picture what I mean

As in above picture the header is dragged towards bottom side which I do not want. I want only the content area to have this feature. How can I make it this way so that contents area drags only when there are no more contents available to see?

Any help css, jquery or jquery mobile trick?

Update

HTML code here

<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 -->

解决方案

Unfortunately your example is not going to work because iOS will not allow you that.

Solution 1 - iOS and Android

Thankfully there's a 3rd party jQuery Mobile plugin that will help you with this problem and it works like a charm. This is an iOS and Android solution.

What you need is a iScrollView plugin made on a basis of iScroll plugin.

I can't make you a jsFiddle example because it don't work with iScrollView, at least I can't make it work so here an example that you can just copy into new HTML file and try it on your iOS.

First here's a working online example I made: 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>

As you can see this example works like magic. One more thing, if you didn't know that iScrollview can also fix another problem. Lets say you have scrolled to the bottom of your page and there's a button to the another page. When you click it usually page will jump to the top and only then page will transition to an another page. This is not an error, this is just how viewpoint works. But tnx to iScrollView you page will just transition from that point and when you get back your page will still be at the same position.

One last thing if you are an iOS developer, iScrollView doesn't have anything to do with UIScrollView.

Solution 2 - iOS only

There's a pure css fix for your problem but it will only work on iOS that is way I am showing it as a second solution.

Again this is not my solution and official page can be found here: http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

With some page changes you can initiate iOS page scrolling with jQuery Mobile.

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>

Last question

Regarding your second question. When you finally reach bottom or if you are on a top of a page you will not be able to prevent bouncing. Only way you can prevent bouncing is if you prevent scrolling. And this is not on option in your case, you need scrolling to access bottom of the page.

Final notes

If you want to find out more about iScroll + iScrollView, how they work with working examples then take a look at this article.

这篇关于在 jquery mobile 中固定标题滚动/拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆