固定头卷轴/拖在jQuery Mobile的 [英] fixed header scrolls/drags in jquery mobile

查看：226
本文介绍了固定头卷轴/拖在jQuery Mobile的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在移动Web应用程序使用jQuery Mobile和PhoneGap的工作。我开发一个Hello World程序。它有页眉，页脚和内容区域。页眉和页脚使用数据位=固定属性固定。但随着页眉和页脚的问题是，当我向下滚动，当内容的完成，没有需要滚动了，然后它的头拖累（灵活性或指示，有没有更多的内容）。正如在其他iOS应用程序，存在此功能，但在这些应用程序的页眉和页脚不会拖累向上和向下的内容区仅有一拖再拖。请看到的图片是什么意思

如上面图片中的头拖向底部，我不想要的。我只想内容领域具有此功能。我怎样才能让这种方式使内容方面一拖再拖，只有当有可看没有更多的内容？

任何帮助CSS和jQuery或jQuery Mobile的把戏？

更新

HTML code此处

 ＆LT; D​​IV数据角色=页面＆GT;

        ＆LT; D​​IV数据角色=头ID =头的数据位=固定＆GT;
            ＆LT; H1＆gt;页面标题＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;＆LT;！ -  /头 - ＆GT;

        ＆LT; D​​IV数据角色=内容ID =内容＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;＆LT;！ -  /内容 - ＆GT;

        ＆LT; D​​IV数据角色=页脚数据位=固定＆GT;
            ＆LT; H4＆gt;页面页脚＆LT; / H4＆GT;
        ＆LT; / DIV＆GT;＆LT;！ -  /页脚 - ＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  /页 - ＆GT;

解决方案

不幸的是你的榜样是行不通的，因为的iOS 将不会允许你。

解决方案1 ​​ - iOS和Android

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

您需要的是一个 iScrollView 插件作出的基础上的 iScroll 插件。

我不能让你的的jsfiddle 的例子，因为它不符合 iScrollView ，至少我不能让工作这么在这里举一个例子，你可以直接复制到新的HTML文件，并尝试在您的的iOS

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

HTML： 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
    ＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
    ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模为1，最大规模= 1，用户可扩展性=无/＆GT;
    ＆LT; META NAME =苹果移动网络应用能力的内容=是＆GT;
    ＆LT; META NAME =苹果移动网络应用程序状态栏式内容=黑＆GT;
    ＆LT;冠军＆GT;演示＆LT; /标题＆GT;

    ＆LT;链接相对=样式表的href =htt​​p://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css/＆GT;
    ＆LT;链接相对=样式表的href =htt​​p://www.fajrunt.org/css/jquery.mobile.iscrollview.css/＆GT;
    ＆LT;链接相对=样式表的href =htt​​p://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css/＆GT;

    ＆所述;脚本的src =htt​​p://www.fajrunt.org/js/jquery-1.9.1.min.js＆GT;＆所述; /脚本＆GT;
    ＆所述;脚本的src =htt​​p://www.fajrunt.org/js/jquery.mobile-1.3.1.js＆GT;＆所述; /脚本＆GT;
    ＆所述;脚本的src =htt​​p://www.fajrunt.org/js/iscroll.js＆GT;＆所述; /脚本＆GT;
    ＆所述;脚本的src =htt​​p://www.fajrunt.org/js/jquery.mobile.iscrollview.js＆GT;＆所述; /脚本＆GT;
＆LT; /头＆GT;

＆LT;身体GT;
    ＆LT; D​​IV数据角色=页面级=索引页＆GT;

    ＆LT; D​​IV数据角色=头的数据位=固定的数据抽头拨动=假数据转换=none的数据-ID =头＆GT;
        ＆LT; H1＆GT; INDEX PAGE＆LT; / H1＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; D​​IV数据角色=内容类=例如，包装数据iscroll＆GT;
        ＆其中p为H.;这将滚动＆其中一些内容; / P＆GT;
        ＆LT; P＆GT;一些更多的内容将滚动＆LT; / P＆GT;
        ＆LT; UL数据角色=列表视图＆GT;
        ＆LT;李＆GT;项目1＆LT; /李＆GT;
        ＆LT;李＆GT;项目2'; /李＆GT;
        ＆LT; / UL＆GT;
        ＆其中p为H.;甚至更多的内容。这将滚动无论是在数据iscroll DIV＆LT; / P＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; D​​IV数据角色=页脚数据位=固定的数据抽头拨动=假数据转换=none的数据-ID =页脚＆GT;
        ＆LT; H1＆gt;我的页脚＆LT; / H1＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

正如你可以看到这个例子的工作原理像变魔术一样。还有一件事，如果你不知道的 iScrollview 也可以解决另一个问题。比方说，你已经滚动到页面的底部，有一个按钮，将另一页。如果你平时点击页面会跳转到顶部，然后才将页面转换到另一个页面。这是不是一个错误，这是多么的观点工作。但TNX为 iScrollView 您网页只是从这一点过渡，当你回到你的页面将仍保持在同一位置。

最后一件事，如果你是一个iOS开发者， iScrollView 没有什么关系的的UIScrollView

解决方案2 - 的iOS只

有您的问题一个纯CSS的修复，但它只能工作在iOS上是这样，我展示它作为第二个解决方案。

同样，这不是我的解决办法和官方页面都可以在这里找到： HTTP ：//outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

对于某些页面的变化，你可以启动iOS的页面滚动使用jQuery Mobile。

HTML： 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
    ＆LT;冠军＆GT;滚动内容演示＆LT; /标题＆GT;
    ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1＆GT;

    ＆LT;！ -  jQuery Mobile的风格 - ＆GT;
    ＆LT;链接相对=样式表的href =HTTP：//$c$c.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/＆GT;

    ＆LT;！ - 修正了之前的iOS 6滚动iOS上 - ＆GT;
    ＆LT;风格类型=文本/ CSS＆GT;
        体 {
            保证金：0;
        }

        DIV＃集装箱{
            位置：绝对的;
            宽度：100％;
            顶部：0;
            底部：0;
        }

        DIV [数据角色=头] {
            位置：绝对的;
            顶部：0;
            左：0;
            右：0;
        }

        DIV [数据角色=内容] {
            位置：绝对的;
            顶部：41px;
            底部：0;
            左：0;
            右：0;
        }

        .scrollable {
            溢出-Y：滚动;
            -webkit-溢出滚动：触摸;
        }

            / *的iOS特定的修补程序，没有在Android设备上使用它。* /
        .scrollable＆GT; * {
            -webkit-变换：translateZ（0px）;
        }
    ＆LT; /风格＆GT;

    ＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.8.2.min.js＆GT;＆所述; /脚本＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。一（mobileinit'，函数（）{

            //设置的#container格为JQM pageContainer
            $ .mobile.pageContainer = $（'＃集装箱'）;

            //设置默认页面过渡下滑
            $ .mobile.defaultPageTransition ='滑';

        }）;
    ＆LT; / SCRIPT＆GT;
    ＆所述;脚本的src =的http：//$c$c.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js＆GT;＆所述; /脚本＆GT;

＆LT; /头＆GT;
＆LT;身体GT;
＆LT; D​​IV ID =容器＆GT;

    ＆LT; D​​IV数据角色=页面＆GT;
        ＆LT; D​​IV数据角色=头的数据位=固定＆GT;
            ＆LT; H1＆GT;滚动的含量小于/ H1＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; D​​IV数据角色=内容类=滚动＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
            ＆LT; H1＆GT;您好卷云＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV数据角色=页脚数据位=固定＆GT;
            ＆LT; H1＆GT;尾＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

最后一个问题

关于你的第二个问题。当你终于到达底部，或者如果你是在一个页面的顶部，你将无法prevent反弹。只有这样，你可以prevent弹跳是，如果你prevent滚动。这是不是对你的情况选择，你需要滚动到页面的访问底部。

最后说明

如果您想了解更多关于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天全站免登陆