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

Posted 2023-05-06

技术标签:

【中文标题】jquery mobile中的固定标题滚动/拖动【英文标题】：fixed header scrolls/drags in jquery mobile 【发布时间】：2013-04-28 20:09:09 【问题描述】：

我正在使用 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 -->

【问题讨论】：

你能贴一些代码吗？你要覆盖

吗？所有浏览器都会发生同样的情况吗？

我没有在浏览器中运行它。我正在使用 phonegap 将其作为本机应用程序运行。 【参考方案1】：

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

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

该选项曾经被称为 UIWebViewBounce，所以如果您使用的是旧版本，您将需要在 config.xml 中使用这一行：

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

【讨论】：

【参考方案2】：

不幸的是，您的示例不起作用，因为 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 的更多信息，以及它们如何处理工作示例，请查看article。

【讨论】：

感谢您的回答。我不想阻止反弹。我只想像其他原生 iOS 应用程序一样反弹内容区域而不是页眉和页脚。例如，在 Facebook 应用程序中。当用户滚动到顶部并且他仍然想要滚动时，标题会粘在顶部但内容区域会反弹。因此刷新命令被执行以从服务器重新加载内容。（我不想在这里添加刷新功能，但只有页眉和页脚的弹跳让我感到不安。）感谢 Gajotres 这两个解决方案。我一直在使用 iscrollview 并且固定的页眉/页脚工作得很好。但是，在带有指向另一个页面的图像的长列表中，进入该页面并返回（返回按钮）需要很长时间。我一直在寻找其他解决方案（解决方案 2 和推翻 filamentgroup.github.io/Overthrow），但似乎没有一个适用于 phonegap 2.6.0。如果我在 index.html 中复制并粘贴解决方案 2 并制作一个 phonegap 应用程序，标题仍然会拖动。它是与 Phonegap 2.6 相关的问题吗？ PS：我正在尝试使用 IOS 5.1 在 iphone 3GS 上解决此问题） iScroller JS 似乎有一个错误。我收到与这行代码相关的错误(jQuery, window, document)); Uncaught ReferenceError: jQuery is not defined inside jquery.mobile.iscrollview.js line 1912 设法解决这个问题，但它没有按预期工作。滚动时页脚和页眉仍然消失【参考方案3】：

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

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

【讨论】：

【参考方案4】：

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

【讨论】：

【参考方案5】：

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

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

【讨论】：

【参考方案6】：

我为此苦苦挣扎了很久，这对我来说真的很管用，包括你在哪里初始化应用程序：

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

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

【讨论】：

【参考方案7】：

只需在页眉和页脚标签中添加 overflow:scroll：

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

【讨论】：

以上是关于jquery mobile中的固定标题滚动/拖动的主要内容，如果未能解决你的问题，请参考以下文章

ios中的嵌入式视频阻止导航栏功能jquery mobile

jQuery-ui 可拖动滚动仅垂直

JQuery Mobile - 用地图填充内容 div，没有滚动

Jquery Mobile Swipe 事件导致输入中的文本不可拖动

iOS PhoneGap jQuery Mobile App 中的可见滚动条

jQuery Mobile - 窗口加载后跳转到顶部