iPhone HTML5 应用滚动问题答案

【问题标题】：iPhone HTML5 App Scrolling QuestioniPhone HTML5 应用滚动问题
【发布时间】：2011-03-08 21:03:27
【问题描述】：

我不知道这是否可能，也不知道谷歌能找到什么，但你可以添加：

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

它会让你不能左右滚动，只能上下滚动。有没有办法让它在你到达终点时不会产生过度滚动效果，但继续滚动然后它会弹回来？就像 Cocoa 应用程序一样，我注意到“过度滚动”有时它们具有相同的背景颜色，所以它看起来不像 Safari 的，或者它根本不这样做？

【问题讨论】：

标签： javascript iphone web-applications mobile ios4

【解决方案1】：

您所说的过度滚动称为反弹。不幸的是，没有记录在案的方法可以关闭 UIWebView 中的反弹。您可以查看 UIScrollView 以了解与弹跳相关的方法。 UIWebView 拥有 UIScrollView 但不公开它。

要防止水平滚动，您只需确保您的网页适合视口。不适合的一个常见原因是当主体边距不为零时，项目宽度为 100%。

您可以通过向文档添加触摸事件处理程序并在该事件上调用 preventDefault 来完全防止滚动和弹跳。如果您的网页完全适合视口，这将有效地禁用反弹。

function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );

编辑：

UIWebView 在 Objective-C 端大部分是私有的，但从 javascript 端可以访问。如果您不控制正在加载的内容，您可以inject javascript。

【讨论】：

废话，谢谢！那么知道一种方法（没有 JS）来做固定位置吗？
@drawnonward。这对我很有用，除了它禁用了我所有的 select 菜单。有没有办法解决这个问题？

【解决方案2】：

如果您使用的是 Cordova 1.7+，只需打开 Cordova.plist 文件并将密钥 UIWebViewBounce 设置为 NO

在 Cordova 2.3+ 中，现在是 config.xml，您需要将其设置为 false。

【讨论】：

【解决方案3】：

@JSW189

如果你删除这一行：

document.addEventListener( 'touchstart' , stopScrolling , false );

那么它应该可以工作，我猜。我遇到了无法再按按钮的问题，我尝试删除上面的这一行，但它不再滚动，我可以按按钮。

【讨论】：

【解决方案4】：

以前 Cordova 版本的解决方案在以下帖子中：http://tripleshotsoftware.blogspot.ch/2012/09/stop-uiwebview-bounce-for-cordova-based.html

更改 MainViewController.m（或旧版本 Cordova/Callback/PhoneGap 中的 AppDelegate.m 文件）。

查找 webViewDidFinishLoad，并在该方法中添加以下行：

[[theWebView.subviews objectAtIndex:0] setBounces:NO];

【讨论】：