jquery - iOS HTML Web App (PhoneGap) 过度滚动

Question

此问题已在 Stack Overflow 上多次解决，但并未完全解决。

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

这是简单的 hack(在 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;
}

现在的问题是，如果当前滚动位置在顶部并且我向上滚动(下拉)，我会过度滚动并下拉标题。反之亦然。如果内容 View 滚动到底部并且我尝试进一步滚动，则页脚会被拉起并过度滚动。现在明确一点，滚动是指在 iPhone 或 iOS 模拟器中进行触摸滚动。

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

伪代码很简单:

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

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

Answer 1

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

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

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