如何防止在手机隙中运行的应用垂直滚动？

问题描述

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

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

解决方法

如果您使用的是Cordova 2.3.0+，请找到config.xml并添加以下行： <preference name=\"UIWebViewBounce\" value=\"false\" /> 或Cordova 2.6.0+： <preference name=\"DisallowOverscroll\" value=\"true\" /> , 加载页面以禁用拖动时运行以下代码：

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

这是jQuery的一个示例：

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

, 在您的配置文件中使用

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

, 如果您使用的是Cordova 2.6.0+，请找到config.xml，只需添加/修改此行： <preference name=\"DisallowOverscroll\" value=\"true\" /> , 将以下条目添加到config.xml文件中：

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

, 您没有说这是本机应用程序还是网络应用程序。如果这是本机应用程序，则可以关闭在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 , 在项目的config.xml中，在iOS的首选项下，将DisallowOverscroll设置为true。默认情况下为false，这会使整个视图与视图的内部元素一起滚动。

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

, 对我来说，当我将主体选择器与jquery一起使用时，它的工作非常完美。否则，我无法使用Phonegap打开外部链接。

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

, 在2.6.0中将UIWebViewBounce更改为DisallowOverscroll , 本地化并将此行添加到AppDelegate.m文件

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

将其放在-（BOOL）应用程序：（UIApplication）应用程序didFinishLaunchingWithOptions *部分中。 , 现在您只需要在config.xml文件中将<preference name=\"DisallowOverscroll\" value=\"false\" />放到<preference name=\"DisallowOverscroll\" value=\"true\" />中即可。 , 首先，您需要做的是将事件侦听器添加到body卸载方法中。只需将这一行放在触摸移动方法中即可。它不会滚动 document.addEventListener（\“ touchstart / touchmove / touchend \”）。这三个中的任何一个。

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

, 如果.plist文件中的UIWebViewBounce为NO。然后使用简单的CSS将使内容不可滚动。尝试添加此样式溢出：隐藏在您要禁用滚动的div中。 , 在项目的config.xml中，在iOS的首选项下，将DisallowOverscroll设置为true。

垂直应用应用应用手机手机手机滚动滚动防止防止