iPhone HTML5 应用程序滚动问题

Question

我不知道这是否可行，也不知道该如何通过Google来找到它，但是像你可以添加：

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

这会使您无法左右滚动，只能上下滚动。有没有办法使其在到达末尾时不执行超滚动效果，而是继续滚动然后弹回？就像我注意到Cocoa应用程序有时具有相同的背景颜色，因此它看起来不像Safari那样或者根本不执行它一样。

- Oscar Godson

Answer 1

你所称的“overscroll”在 UIWebView 中被称为“bounce”。不幸的是，目前没有记录方式可以关闭 UIWebView 中的 bounce。你可以查看 UIScrollView 的相关方法来了解 bounce。UIWebView 拥有一个 UIScrollView，但不会公开它。

为了防止水平滚动，你只需要确保网页适合视口大小。一个常见的原因是当 body margin 不为零时，100% 宽度的元素无法适应视口。

你可以通过向文档添加 touch 事件处理程序并在事件上调用 preventDefault 来完全禁止滚动和 bounce。这将有效地禁用 bounce，如果你的网页完全适合视口的话。

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

编辑：

从Objective-C的角度来看，UIWebView大多数是私有的，但从javascript的角度来看是相当可访问的。如果您无法控制正在加载的内容，您可以注入javascript。

- drawnonward

---

有没有办法（不用JS）实现固定位置呢？谢谢！ - Oscar Godson

@drawnonward。这对我非常有效，但它禁用了所有我的“select”菜单。有没有什么方法可以解决这个问题？ - JSW189

Answer 2

如果您正在使用Cordova 1.7+，只需打开Cordova.plist文件并将键UIWebViewBounce设置为NO 在Cordova 2.3+中，现在是config.xml，并且您需要将其设置为false。

- Thierry Blais

Answer 3

@JSW189

如果您删除这行代码：

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

我猜这样应该就可以了。我遇到的问题是无法再按按钮，我尝试删除上面的那行代码，然后页面不再滚动，并且我能够按按钮。

- Rotan075

Answer 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];

- Sam