繁体   English   中英

iOS HTML Web App(PhoneGap)滚动

[英]iOS HTML Web App (PhoneGap) over scrolling

此问题已在Stack Overflow上解决了几次,但并未完全解决。

问题在于,iOS允许您“过度滚动”一个网页,该网页对于Web应用程序的页眉和页脚看起来很糟糕。 一个简单的解决方法是阻止浏览器使用“ 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

我对此有各种麻烦。

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

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

当您在配置中放置以上行并创建构建时,过滚动功能将被禁用! 因此,无需JavaScript即可解决此问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM