iOS HTML Web App (PhoneGap) 滚动

Posted 2023-03-15

【中文标题】iOS HTML Web App (PhoneGap) 滚动

【英文标题】：iOS HTML Web App (PhoneGap) over scrolling

【发布时间】：2014-07-22 07:01:49

【问题描述】：

这个问题已经在 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;

现在的问题是，如果当前滚动位置在顶部并且我向上滚动（下拉），我过度滚动并拉下标题。反过来也是一样。如果内容视图滚动到底部并且我尝试进一步滚动，则页脚被拉起并过度滚动。现在澄清一下，滚动是指 iPhone 或 iOS 模拟器中的触摸滚动。

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

伪代码很简单：

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

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

【参考方案1】：

您可以在 cordova config.xml 中禁用此功能

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

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