iPhone HTML5 App滚动问题

时间:2010-06-27 17:36:03

标签: javascript iphone web-applications mobile ios4

我不知道这是否可行,或者Google可以找到它,但是您可以添加:

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

它会使它不能左右滚动,只能上下滚动。是否有一种方法可以做到这一点,当你到达终点时它不会做那种过度滚动效果但是继续滚动然后它会弹回来?像Cocoa应用程序一样,我注意到“过度滚动”有时它们具有相同的背景颜色,因此它看起来不像Safari,或者它根本不执行它?

4 个答案:

答案 0 :(得分:14)

你称之为过度滚动被称为反弹。不幸的是,没有一种记录的方法来关闭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

答案 1 :(得分:5)

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

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

答案 2 :(得分:2)

@ JSW189

如果删除此行:

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

然后它应该可以工作,我想。我遇到的问题是我无法按下按钮,我尝试删除上面的这一行,它不再滚动,我可以按下按钮。

答案 3 :(得分:1)

以前的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];