logo标签列表

如何防止使用PhoneGap开发的应用程序在垂直方向上滚动？

iphoneioscordova
60

我正在尝试使用PhoneGap，我希望我的应用在用户拖动手指时不会上下滚动。这是我的代码。有人能告诉我为什么它仍然允许滚动吗？

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name = "viewport" content = "user-scalable=no,width=device-width" />
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />-->

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />       
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */

    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    for more details -jm */
    /*
    function handleOpenURL(url)
    {
        // TODO: do something with the url passed in.
    }
    */

    function onBodyLoad()
    {       
        document.addEventListener("deviceready",onDeviceReady,false);
    }

    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    for more details -jm */
    function onDeviceReady()
    {
        // do your thing!
        navigator.notification.alert("PhoneGap is working")
    }
    touchMove = function(event) {
        // Prevent scrolling on this element
        event.preventDefault();
    }

</script>
<style>
#container {
width:100%;
height:100%;
}
</style>

</head>

    <body onload="onBodyLoad()">
        <div id="container" ontouchmove="touchMove(event);">
        </div>
    </body>
</html>
14个回答
91
如果您正在使用Cordova 2.3.0或更高版本，请找到config.xml并添加以下行：
<preference name="UIWebViewBounce" value="false" />
如果您的Cordova版本是2.6.0或更高版本，则应添加以下行：
<preference name="DisallowOverscroll" value="true" />
5
请注意您的 meta viewport 标签。width 值不能大于屏幕宽度，这在应用程序横向时很棘手。我使用以下值：<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=1024, height=768, target-densitydpi=device-dpi" /> 适用于 iPad 横向应用程序。 - gregmatys
35

当页面加载时运行此代码以禁用拖动：

document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

以下是使用jQuery的示例：

$(document).ready(function() {
    document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
});
即使有内容，这也可以防止滚动。 - techieWings
3
@techieWings，我不理解你的评论...... 你读了问题吗？那正是原帖发布者所询问的。 - Felipe Brahm
1
是的，我有。我只是在寻找一些东西，它不会允许页面过度滚动，但当有可滚动内容时仍然可以滚动。 - techieWings
21

在您的配置文件中使用

<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
这是真正的（或非常有用的）答案。令人惊讶的是，只有少数人投票支持这个答案。 - Hoon
10

如果您使用的是 Cordova 2.6.0+ ，找到 config.xml，只需添加/修改此行：

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

该行代码可实现防止过度滚动的功能。
3
非常好用。我想知道为什么这不是默认激活的。请注意，如果您正在使用cordova-cli，您需要修改的config.xml位于/ www目录中，而不是/ platforms / ios目录中的那个。 - plang
5
请将以下内容添加到config.xml文件中：

<preference name="DisallowOverscroll" value="true" />
4
你没有说明这是原生应用还是Web应用。
如果这是原生应用，你可以在webview上关闭滚动。
UIScrollView* scroll;  //
for(UIView* theWebSubView in self.webView.subviews){  // where self.webView is the webview you want to stop scrolling.
    if([theWebSubView isKindOfClass:[UIScrollView class] ]){
        scroll = (UIScrollView*) theWebSubView;
        scroll.scrollEnabled = false;
        scroll.bounces = false;
    }
}

否则，这里有一个链接可以防止在PhoneGap应用程序中滚动。 http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
它是本地的，因为它在PhoneGap的包装器内运行。大多数人不会称在本地包装器内运行的Web应用程序为“本地应用程序”。 - Casey Flynn
1
他说他正在使用PhoneGap并展示了一堆HTML和CSS代码，这怎么可能是一个原生应用程序呢？ - Doug Molineux
3
在您的项目的config.xml文件中，对于iOS的首选项，将DisallowOverscroll设置为true。默认情况下它为false，这会使整个视图与视图内元素一起滚动。
<preference name="DisallowOverscroll" value="true" />
2

对于我来说，当我使用jQuery中的body选择器时，它非常完美。否则，我将无法使用Phonegap打开外部链接。

$('body').on('touchmove', function(evt) {
    evt.preventDefault(); 
})
也适用于每个页面。 $（'div＃home'）.on（'touchmove'，function（evt）{ evt.preventDefault（）; }） - JeffAtStepUp
2

在2.6.0版本中，将UIWebViewBounce更改为DisallowOverscroll。

1

将以下代码添加到AppDelegate.m文件中，实现原生功能。

self.viewController.webView.scrollView.scrollEnabled = false;

将其放在(BOOL)application:(UIApplication)application didFinishLaunchingWithOptions*部分中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接