iOS中的Jquery Mobile滚动和标题问题答案

【问题标题】：Jquery Mobile scrolling and header issue in iOSiOS中的Jquery Mobile滚动和标题问题
【发布时间】：2015-05-11 07:35:50
【问题描述】：

我正在使用 Phonegap 和 JQuery Mobile 实现应用程序，该应用程序在 Android 中完美运行，但在 iOS 中存在单指滚动和页眉页脚问题。首先，当我添加此代码时，我失去了单指滚动。页眉似乎固定到位，我怎样才能使页眉+页脚在滚动时不移动？

 body {
   -webkit-overflow-scrolling: touch;    
 }

如何防止页眉和页脚滚动？

【问题讨论】：

标签： html ios css cordova

【解决方案1】：

尝试如下修改视口：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

我已经从默认值中删除了高度。

然后添加您的 config.xml：

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

如果您愿意，可以将其限制为 iOS：

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

【讨论】：

我用上面的代码修改并测试但没有工作得到同样的问题。

【解决方案2】：

您必须明确设置要独立滚动的 div 的大小。这必须在页面创建后发生。比如：

    // sizes the div for independent scrolling
    var divRect  = myDiv.getBoundingClientRect();

    myDiv.style.height = document.body.clientHeight-divRect.top +"px";

【讨论】：