11 Replies Latest reply on Jun 6, 2017 8:09 AM by yardsales

    Disable scrolling in android

    yardsales Level 1

      I am attempting to disable scrolling for my PhoneGap app. The code below works fine on iOs, but no effect on Android.

       

      document.ontouchmove = function(e){ e.preventDefault(); }

      which I call on device ready,

      I also have this in my config if it's relevant

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

       

      Did a lot of web searching and this is the recommended code it seems.

      Anyone else have luck?

        • 1. Re: Disable scrolling in android
          kerrishotts Adobe Community Professional

          What version(s) of Android have you tried on? What's in your viewport meta tag, if anything?

           

          Also, what's the need here to prevent scrolling? DisallowOverscroll would just prevent the body container from scrolling -- it won't prevent any other container from scrolling. For that, "overflow: hidden" should be sufficient.

          • 2. Re: Disable scrolling in android
            yardsales Level 1

            6.0.01

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

            I want to prevent scrolling so my phongap app appears to act more like a native app

            • 3. Re: Disable scrolling in android
              kerrishotts Adobe Community Professional

              Might be useful to see your entire config.xml sans identifying/secret information, but DisallowOverscroll should be sufficient here. It might also be useful to see an example of your DOM hierarchy -- remember DisallowOverscroll will not affect scrollable elements other than the primary container.

               

              I wouldn't count on ontouchmove being sufficient to prevent a scroll operation anyway; try also intercepting ontouchstart and ontouchend. Of course, doing so might adversely affect the rest of your app since all touch events will now never perform their default action.

               

              Also try playing with the touch-action CSS property. You should be able to tell Android that you don't want any scroll handling on certain elements that way. (iOS doesn't support the same range of values, unfortunately.)

              • 4. Re: Disable scrolling in android
                yardsales Level 1

                "remember DisallowOverscroll will not affect scrollable elements other than the primary container"
                I did not know this, not exactly sure what it means but I will read on it.

                 

                 

                "intercepting ontouchstart "
                Yeah I figured that would mess up other stuff as well

                 

                " try playing with the touch-action CSS property"
                Ok I will fool with that too.

                 

                Here's my config.xml as well as my simple testing index.html file.

                 

                 

                 

                <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" versionCode = "100" id="xxx" version="1.0.0">

                <!-- versionCode is optional and Android only: needs to be increased every time you submit a new APK version.  see: http://developer.android.com/tools/publishing/versioning.html  -->

                  <name>Yardsales</name>

                  <description>Post Yardsales and Garage Sales and Find Yard Sales</description>

                  <author href="http://www.yardsales.com" email="xxxx@yardsales.com">Yardsales Team</author>

                  <content src="index.html"/>

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

                  <preference name="android-build-tool" value="gradle" />

                  <preference name="android-minSdkVersion" value="15"/> <!-- android: API level 15 is Android 4.0.3, ICE_CREAM_SANDWICH_MR1. -->

                  <preference name="orientation" value="portrait" />

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

                 

                  <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>

                  <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1">

                     <variable name="CAMERA_USAGE_DESCRIPTION" value="This allows you to take photos of items at your yardsale" />

                  <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="This allows you to take photos of items at your yardsale" />

                  </plugin>

                  <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>

                  <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>

                  <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>

                  <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>

                  <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>

                  <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>

                  <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>

                  <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>

                  <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.4.1">

                  <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="Location is used to show yardsales near you" />

                  </plugin>

                  <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>

                  <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>

                  <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>

                  <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0"/>

                  <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>

                  <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>

                  <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>

                  <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

                  <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" source="npm" />

                  <plugin spec="https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git" source="git" />

                  <plugin name="cordova-plugin-x-socialsharing" source="npm" />

                 

                 

                  <icon src="icon.png"/>

                  <platform name="android">

                  <preference name="orientation" value="portrait" />

                    <icon src="res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

                    <icon src="res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>

                    <icon src="res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>

                    <icon src="res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>

                    <icon src="res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>

                    <icon src="res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

                    <splash src="res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/>

                    <splash src="res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/>

                    <splash src="res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/>

                    <splash src="res/screen/android/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>

                    <splash src="res/screen/android/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>

                    <splash src="res/screen/android/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>

                    <splash src="res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>

                    <splash src="res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>

                    <splash src="res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>

                    <splash src="res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

                    <splash src="res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>

                    <splash src="res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

                  </platform>

                  <platform name="ios">

                  <preference name="orientation" value="portrait" />

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

                  <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> </config-file>

                  <config-file platform="ios" parent="UIStatusBarHidden" overwrite="true"> <true/> </config-file>

                    <icon src="res/icon/ios/icon.png" platform="ios" width="57" height="57"/>

                    <icon src="res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>

                    <icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>

                    <icon src="res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>

                    <icon src="res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>

                    <icon src="res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>

                    <icon src="res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>

                    <icon src="res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>

                    <icon src="res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>

                    <icon src="res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>

                    <icon src="res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>

                    <icon src="res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>

                    <icon src="res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>

                    <icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>

                    <icon src="res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>

                    <icon src="res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>

                    <splash src="res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>

                    <splash src="res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>

                    <splash src="res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>

                    <splash src="res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>

                    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>

                    <splash src="res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>

                    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>

                    <splash src="res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>

                    <splash src="res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>

                    <splash src="res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>

                  </platform>

                  <platform name="wp8">

                    <icon src="res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/>

                    <icon src="res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/>

                    <splash src="res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/>

                  </platform>

                  <platform name="windows">

                    <icon src="res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/>

                    <icon src="res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/>

                    <icon src="res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/>

                    <splash src="res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/>

                    <icon src="res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/>

                    <icon src="res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/>

                    <icon src="res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/>

                    <icon src="res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/>

                    <icon src="res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/>

                    <icon src="res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/>

                    <icon src="res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/>

                    <icon src="res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/>

                    <icon src="res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/>

                    <icon src="res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/>

                    <splash src="res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/>

                  </platform>

                  <access origin="*"/>

                  <access origin="tel:*" launch-external="yes" />

                  <access origin="geo:*" launch-external="yes" />

                  <allow-navigation href="*" />

                  <allow-intent href="http://*/*"/>

                  <allow-intent href="https://*/*"/>

                  <allow-intent href="tel:*"/>

                  <allow-intent href="sms:*"/>

                  <allow-intent href="mailto:*"/>

                  <allow-intent href="geo:*"/>

                  <platform name="android">

                    <allow-intent href="market:*"/>

                  </platform>

                  <platform name="ios">

                    <allow-intent href="itms:*"/>

                    <allow-intent href="itms-apps:*"/>

                  </platform>

                 

                 

                </widget>

                 

                 

                 

                 

                 

                 

                <!DOCTYPE html>

                <html>

                <head>

                <title>Yardsales</title>

                <meta charset="utf-8" />

                <meta name="format-detection" content="telephone=no" />

                <meta name="msapplication-tap-highlight" content="no" />

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

                <meta name="title" content="Yardsales and Garage Sales">

                <meta name="description" content="Whether you are looking for a yard sale or looking to advertise garage sales we can help" />

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

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

                <meta name="apple-mobile-web-app-capable" content="yes" />

                <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

                 

                 

                <script src="libs/jquery.min.js"></script>

                <link rel="stylesheet" href="libs/bootstrap.min.css">

                <script src="libs/bootstrap.min.js"></script>

                 

                 

                <script src="scripts/appCore.js"></script>

                 

                 

                <script type="text/javascript" src="cordova.js"></script>

                 

                 

                <script>

                var APP = new app({

                  title: "Yardsales"

                });

                APP.boot();

                </script>

                 

                 

                </head>

                <body>

                <div id="appScreen">

                <div id="content" class="container">

                 

                 

                <div id="status">...</div>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet &mdash; consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                <BR>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

                END

                 

                 

                </div><!-- content container -->

                </div><!-- appScreen -->

                 

                 

                 

                 

                <script>

                $(document).ready(function () {

                 

                 

                });

                </script>

                 

                 

                </body>

                </html>

                 

                and my little .js file

                function app(cfgObj) {

                  this.config = cfgObj;

                  this.initialResize=true;

                 

                    this.boot = function() {

                  this.isPhonegapApp = (typeof window.cordova !== "undefined"); // assumed always true

                  document.addEventListener('deviceready', this.onDeviceReady, false);

                  window.addEventListener('resize', this.onResize, false);   

                  };

                 

                 

                    this.onDeviceReady = function() {

                  // various things I've tried

                  //document.ontouchmove = function(e){ e.preventDefault(); }

                  //document.ontouchmove = function(e){ e.preventDefault(); window.scroll(0,0); return false; }

                  //$("body").css("overflow", "hidden");

                  //$(window).scroll(function (event) {

                  // event.preventDefault();

                  //});

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

                    };

                }

                • 5. Re: Disable scrolling in android
                  kerrishotts Adobe Community Professional

                  So what the first point means is if you have a <div> styled with overflow:scroll, DisallowOverscroll will NOT affect that element in any way. DisallowOverscroll only affects the webview container, not any elements inside that can also scroll. Without seeing your CSS it's difficult to judge, but your structure makes me suspect that you've got scrolling enabled on <div id="content"> or similar, which means that the DisallowOverscroll setting will have no effect.

                  • 6. Re: Disable scrolling in android
                    yardsales Level 1

                    Arg, sorry. here's my CSS.

                     

                    well, I'm using bootstrap https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css

                     

                    And this custom with it:

                     

                    * {

                      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

                    }

                    body {

                        -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */

                        -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */

                        -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

                       margin: 0px;

                    }

                    /* b&w stripped */

                    .progress {background: rgba(245, 245, 245, 1); border: 0px solid rgba(245, 245, 245, 1); border-radius: 4px; height: 20px;}

                    .progress-bar-custom {background: rgba(0, 0, 0, 1);}

                    .progress-striped .progress-bar-custom {background-color: rgba(0, 0, 0, 1); background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255, 255, 255, 0.8),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255, 255, 255, 0.8)),color-stop(0.75,rgba(255, 255, 255, 0.8)),color-stop(0.75,transparent),to(transparent))); background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.8) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.8) 50%,rgba(255, 255, 255, 0.8) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.8) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.8) 50%,rgba(255, 255, 255, 0.8) 75%,transparent 75%,transparent); background-size: 40px 40px;}

                     

                    user agent stylesheeth1 {

                        display: block;

                        font-size: 2em;

                        -webkit-margin-before: 0.67em;

                        -webkit-margin-after: 0.67em;

                        -webkit-margin-start: 0px;

                        -webkit-margin-end: 0px;

                        font-weight: bold;

                    }

                    ul {

                        margin: 0;

                        padding: 0;

                    }

                    li {

                        list-style: none;

                    }

                     

                     

                     

                     

                    div.footer {

                      margin-top: 20px;

                        text-align: center;

                        letter-spacing: 1px;

                        font: 10px tahoma, AppleGothic, sans-serif;

                        color: bisque;

                    }

                    .fullWidth {

                        width: 760px;

                    }

                    .footerLink a { text-decoration: none; }

                    .footerLink a:hover { color:#4E4E4E; text-decoration:underline; }

                    /*.footerLink a { color: #4E4E4E; } */

                    .footerLink a:visited { text-decoration: none; }

                     

                     

                    #splashScreen {

                        top: 100px;

                        width: 550px;       /* same px as splash bitmap width */

                        position: relative;

                        margin: 0 auto;

                    }

                    #splashPBContainer {

                        width: 70%;

                        margin: 0 auto;

                    }

                    #splashProgressload {

                        top: 400px;         /* where to appear on splash image */

                        width: 70%;

                        position: absolute;

                    }

                     

                     

                     

                     

                     

                     

                    /* Fixed header */

                    body {

                      min-height: 2000px;

                      padding-top: 70px; /* navbar-header .height + 20 padding */

                    }

                    .navbar-toggle {

                      float: left;

                      margin-left: 15px;

                      margin-right: 0px;

                    }

                     

                     

                    /* Fixed subfooter on top of .footer  via bottom: 49px (which is height of footer) */

                    .subfooter {

                      background:#cccccc; /* 000000 f5f5f5 ffffff*/

                      color:#fff;

                      Xfont-size:10px;

                      position:fixed;

                      bottom:49px; /* 44*/

                      left:0;

                      right:0;

                      padding:10px; /*  6px 20px;*/

                      XXXheight:44px;  /* 44 */

                      Xline-height:30px; /* 44*/

                      Xborder-top:rgba(255,255,255,0.3) 1px solid;

                      overflow:hidden;

                      z-index:100; /* keep it over #overlay */

                    }

                    /* Fixed footer via bottom: 0 */

                    .footer {

                      background:#333333;

                      color:#fff;

                      font-size:10px;

                      position:fixed;

                      bottom:0;

                      left:0;

                      right:0;

                      padding:6px 20px;

                      height:49px;

                      line-height:30px;

                      Xborder-top:rgba(255,255,255,0.3) 1px solid;

                      overflow:hidden;

                      z-index:100; /* keep it over #overlay */

                    }

                    .footer .btn-group .btn-success {

                        Xcolor: #414141;

                        Xbackground-color: #000000;

                        Xborder-color: #000000;

                    }

                    .footer .btn-success {

                        color: #414141;

                    }

                    .footer .btn-success:hover,.footer  .btn-success:focus,.footer  .btn-success.focus,.footer  .btn-success:active,.footer  .btn-success.active,.footer  .open>.dropdown-toggle.btn-success {

                        color: #fff;

                        background-color: #449d44;

                        border-color: #398439;

                    }

                     

                     

                    /* navbar item */

                    .navbar-default .navbar-header .navbar-item{

                      float: right;

                      color: white;

                      background-color: blue;

                      height: 50px; /* See also body .padding-top */

                      padding: 15px 15px;

                      font-size: 18px;

                      line-height: 20px;

                      text-decoration: none;

                    }

                     

                     

                    /* Active navbar item arrow - also see javascript*/

                    .navbar {

                        border-bottom: #5cb85c 2px solid;

                    }

                    .navbar-default .navbar-header > a.active{

                      position: relative;

                    }

                    .navbar-default .navbar-header > a.active:after{

                      border-bottom: 10px solid white;  /* #dbdbdb */

                      border-left: 10px solid transparent;

                      border-right: 10px solid transparent;

                      content: "";

                      height: 0;

                      left: 0;

                      margin: auto;

                      position: absolute;

                      right: 0;

                      top: 42px;

                      width: 0;

                    }

                     

                     

                    .breadcrumb {

                        padding: 0px;

                      background: #D4D4D4;

                      list-style: none;

                      overflow: hidden;

                        margin-top: 20px;

                    }

                    .breadcrumb>li+li:before {

                      padding: 0;

                    }

                    .breadcrumb li {

                      float: left;

                    }

                    .breadcrumb li.active a {

                      background: brown;                   /* fallback color */

                      background: #ffc107 ;

                    }

                    .breadcrumb li.completed a {

                      background: brown;                   /* fallback color */

                      background: hsla(153, 57%, 51%, 1);

                    }

                    .breadcrumb li.active a:after {

                      border-left: 30px solid #ffc107 ;

                    }

                    .breadcrumb li.completed a:after {

                      border-left: 30px solid hsla(153, 57%, 51%, 1);

                    }

                    .breadcrumb li a {

                      color: white;

                      text-decoration: none;

                      padding: 10px 0 10px 45px;

                      position: relative;

                      display: block;

                      float: left;

                    }

                    .breadcrumb li a:after {

                      content: " ";

                      display: block;

                      width: 0;

                      height: 0;

                      border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */

                      border-bottom: 50px solid transparent;

                      border-left: 30px solid hsla(0, 0%, 83%, 1);

                      position: absolute;

                      top: 50%;

                      margin-top: -50px;

                      left: 100%;

                      z-index: 2;

                    }

                    .breadcrumb li a:before {

                      content: " ";

                      display: block;

                      width: 0;

                      height: 0;

                      border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */

                      border-bottom: 50px solid transparent;

                      border-left: 30px solid white;

                      position: absolute;

                      top: 50%;

                      margin-top: -50px;

                      margin-left: 1px;

                      left: 100%;

                      z-index: 1;

                    }

                    .breadcrumb li:first-child a {

                      padding-left: 15px;

                    }

                    .breadcrumb li a:hover { background: #ffc107  ; }

                    .breadcrumb li a:hover:after { border-left-color: #ffc107   !important; }

                     

                     

                    .stripLRborders {

                      border-left: 0px;

                      border-right: 0px;

                    }

                    • 7. Re: Disable scrolling in android
                      yardsales Level 1

                      "makes me suspect that you've got scrolling enabled on <div id="content"> or similar, which means that the DisallowOverscroll setting will have no effect."

                      Does that mean I could just do this to my container
                      <div id="content" class="container" style="overflow:hidden">

                      or something similar?

                      • 8. Re: Disable scrolling in android
                        kerrishotts Adobe Community Professional

                        Ok -- maybe I'm not understanding what you're trying to do exactly. So let's make sure I've got what you want to do right.

                         

                        Are you trying to prevent overscroll (bounce), or are you trying to prevent any scrolling at all? DisallowOverscroll is intended only for the first case, not the second.

                         

                        At this point, I suggest dropping your code in a repo and sharing the link to that so I can easily create the app on my machine. That's easier than copying and pasting things and hoping special characters don't creep in.

                        • 9. Re: Disable scrolling in android
                          yardsales Level 1

                          ah, yes, NOT the first case. I am trying to prevent scrolling at all. Basically trying to make my phonegap app appear more native. There are some screens that list stuff that scrolling would be cool. but other screen where I don;t want them to scroll at all. So I'd like to be able to turn scroll on/off on command.

                           

                          What repo would be good to post my little test app to?

                          • 10. Re: Disable scrolling in android
                            kerrishotts Adobe Community Professional

                            Ok, now we're getting somewhere. DisallowOverscroll is not intended to apply to scrolling itself -- just the bounce at the end (and only on the webview itself, not scrollable elements within).

                             

                            First: you should generally avoid disabling scrolling. Your app is going to need to run on many different form factors, which means there may be viewports out there on which your app will not fit without scrolling. Do consider that before proceeding.

                             

                            Next, understand why containers scroll. Control of this is determined by the "overflow" styling rule; the initial value is "visible". This means that any content that overflows its parent's bounds will still be visible. If the parent happens to be the body element, well, the whole thing becomes scrollable so that you can still see the content. And here's where your styling triggers scrolling: you've given the body element a style of "min-height: 2000px", which will be larger than the viewport of nearly every device... which means scrolling will be allowed.

                             

                            The "overflow" rule permits scrolling with "auto" or "scroll", and prevents scrolling with "hidden". The simple fix, then, would be to apply "overflow: hidden" to your body element. However, DO NOT DO THIS unless you have a very good reason!

                             

                            If you really don't want the body element to scroll, find out why it is scrolling and eliminate the reason. In your case, it's at least in part due to the minimum height you've applied. Remove that. See if things improve. (That said, you may have had a reason for including it, so don't be surprised if other things break.)

                             

                            If you must prevent scrolling, apply "overflow: hidden". But think about it first, and try your best to work around it without using it. If you must use it, do so only in rare situations where there simply is no other option, and only do so after having carefully considered the repercussions of doing so.

                             

                            As to a repo, that's up to you. Github, bitbucket, etc. are all fine hosts, so use whatever you like. Although I think the above should address your issue.

                            • 11. Re: Disable scrolling in android
                              yardsales Level 1

                              "Next, understand why containers scroll..."
                              What a well-thought out and enlightening response! I will digest!

                               

                               

                              btw, my reason for trying to restrict scrolling was because many phonegap suggestions I read indicated to disable scrolling to make it appear as more a native app, but your point about many devices is a strong one - I was having to code around that.
                              So I take it, having my app doing the scroll thing might not be all that bad.