如何防止在电话间隙中运行的应用程序垂直滚动？答案

【问题标题】：How to prevent app running in phone-gap from scrolling vertically?如何防止在电话间隙中运行的应用程序垂直滚动？
【发布时间】：2011-09-05 18:53:09
【问题描述】：

我正在尝试电话间隙，我希望我的应用程序在用户在屏幕上拖动手指时不会上下滚动。这是我的代码。谁能告诉我为什么它仍然允许滚动？

   <!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>

【问题讨论】：

标签： iphone ios cordova

【解决方案1】：

如果您使用的是 Cordova 2.3.0+ 找到 config.xml 并添加以下行：

<preference name="UIWebViewBounce" value="false" />

或在 Cordova 2.6.0+ 中：

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

【讨论】：

还要注意你的元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 应用程序。

【解决方案2】：

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

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

这是一个使用 jQuery 的示例：

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

【讨论】：

即使有内容也可以防止滚动。
@techieWings 我不明白你的评论......你读过这个问题吗？这正是原始海报所要求的。
是的，我有。我只是在寻找不允许页面过度滚动但当有可滚动内容时它仍然可以滚动的东西。

【解决方案3】：

在你的配置文件中使用

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

【讨论】：

这是正确（或非常有用）的答案。很惊讶只有少数人投票支持这个答案。

【解决方案4】：

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

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

【讨论】：

效果很好。我想知道为什么默认情况下不激活它。请注意，如果您使用的是 cordova-cli，您必须修改的 config.xml 是您可以在 /www 目录中找到的那个，而不是您在 /platforms/ios 中的那个。

【解决方案5】：

将以下条目添加到 config.xml 文件：

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

【讨论】：

【解决方案6】：

你没有说这是原生应用还是网络应用。

如果这是本机应用程序，您可以关闭 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 wiki 上用于防止滚动的链接。 http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

【讨论】：

它是原生的，因为它在 phonegap 的包装器中运行。大多数人不会将在原生包装器中运行的网络应用称为“原生应用”
他说他用的是phone gap，显示一堆HTML和CSS，怎么可能是原生应用？

【解决方案7】：

在项目的 config.xml 中，在 iOS 的首选项下将 DisallowOverscroll 设置为 true。默认情况下，它是 false ，这会使整个视图与视图的内部元素一起滚动。

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

【讨论】：

【解决方案8】：

对我来说，当我使用带有 jquery 的 body-selector 时，它的工作非常完美。否则我无法使用 Phonegap 打开外部链接。

$('body').on('touchmove', function(evt) {
    evt.preventDefault(); 
})

【讨论】：

也适用于每页。$('div#home').on('touchmove', function(evt) { evt.preventDefault(); })

【解决方案9】：

在 2.6.0 中将 UIWebViewBounce 更改为 DisallowOverscroll

【讨论】：

【解决方案10】：

现在您只需将<preference name="DisallowOverscroll" value="false" /> 到<preference name="DisallowOverscroll" value="true" /> 放入您的config.xml 文件中。

【讨论】：

【解决方案11】：

转为原生并将这一行添加到 AppDelegate.m 文件中

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

将它放在 - (BOOL)application:(UIApplication)application didFinishLaunchingWithOptions* 部分。

【讨论】：

【解决方案12】：

首先你要做的是在body unload方法中添加事件监听器。

只需将这一行放在 touch move 方法中即可。

它不会滚动 document.addEventListener("touchstart/touchmove/touchend")。这 3 个中的任何一个。

function touchMove (event e) {
    e.preventDefault;
}

【讨论】：

【解决方案13】：

如果您的 .plist 文件中有 UIWebViewBounce 为 NO。

然后使用简单的 css 会使内容不可滚动。尝试在要禁用滚动的 div 中添加这种样式 overflow : hidden。

【讨论】：

【解决方案14】：

在项目的 config.xml 中，在 iOS 的首选项下将 DisallowOverscroll 设置为 true。

【讨论】：