iOS HTML Web App(PhoneGap)翻滚

时间:2014-07-22 07:01:50

标签: jquery html ios css cordova

此问题已在Stack Overflow上多次解决,但并非完全如此。

问题在于iOS允许您“过度滚动”一个网页,该网页对于网络应用的页眉和页脚来说看起来很糟糕。一个简单的解决方法是阻止浏览器使用“touchmove”做任何事情。

这是简单的黑客攻击(在Coffeescript中):

$('body').on 'touchmove', (e) ->
  e.preventDefault()

现在,如果你的页眉和页脚之间有内容需要滚动,这是一个问题,所以你可以有一些简单的逻辑来解决这个问题:

$('body').on 'touchmove', (e) ->
  if not $('.content').has($(e.target)).length
    e.preventDefault()

侧面注释(以防它恰好相关),一个很好的小动作来获得动量滚动就是CSS的这个坑:

.content {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

现在的问题是,如果当前滚动位置在顶部并且我向上滚动(向下拉),我会过度滚动并拉下标题。另一种方式也是如此。如果内容视图滚动到底部,我尝试进一步滚动,页脚被拉起并过度滚动。现在只需要清楚,通过滚动,我的意思是在iPhone或iOS模拟器中进行触摸滚动。

所以问题是如何防止这种过度滚动?

它的伪代码很简单:

if at the top and scrolling up or at the bottom and scrolling down
  e.preventDefault

我遇到了各种各样的麻烦。

1 个答案:

答案 0 :(得分:1)

您可以在cordova config.xml中禁用它

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

当您将以上行放入配置并创建构建时,过度滚动功能将被禁用!所以不需要JavaScript来解决这个问题.phew!