CODEWITHSUNDEEP
jqueryioscssiphonecordova
Sushant
Sushant

Reputation: 391

How to avoid pulling down of screen on iPhone app

I am developing an app for iPhone, but my app screen can be pulled down and up if i drag with finger. I want header and footer to keep fix and content of page can be pulled down and up. And also want to change screen appears after pulling down and up should be grey instead of black. I am using xcode5 with cordova (phonegap). Please help.
Thanks you.
enter image description here

enter image description here

Upvotes: 2

Views: 3078

Answers (5)

ArJu
ArJu

Reputation: 1

Try the following script, your issue will be resolved.

// Function to disable "pull-to-refresh" effect present in some webviews.
// Especially Crosswalk 12 and above (Chromium 41+) runtimes.
window.addEventListener('load', function() {
    var lastTouchY = 0;
    var maybePreventPullToRefresh = false;

    // Pull-to-refresh will only trigger if the scroll begins when the
    // document's Y offset is zero.

    var touchstartHandler = function(e) {
        if (e.touches.length != 1) {
            return;
        }
        lastTouchY = e.touches[0].clientY;
        // maybePreventPullToRefresh = (preventPullToRefreshCheckbox.checked) && (window.pageYOffset == 0) ;

        maybePreventPullToRefresh = (window.pageYOffset === 0);
        //document.getElementById('txtLog').textContent = "maybePreventPullToRefresh: " + maybePreventPullToRefresh;
    };

    // To suppress pull-to-refresh it is sufficient to preventDefault the
    // first overscrolling touchmove.

    var touchmoveHandler = function(e) {
        var touchY = e.touches[0].clientY;
        var touchYDelta = touchY - lastTouchY;
        lastTouchY = touchY;

        if (maybePreventPullToRefresh) {
            maybePreventPullToRefresh = false;
            //if (touchYDelta > 0) {
            e.preventDefault();
            //document.getElementById('txtLog').textContent = "TouchY: " + touchYDelta;
            // console.log("pull-to-refresh event detected") ;
            return;
            //}
        }

        // if (preventScrollCheckbox.checked) {
        //     e.preventDefault() ;
        //     return ;
        // }

        // if (preventOverscrollGlowCheckbox.checked) {
        //     if (window.pageYOffset == 0 && touchYDelta > 0) {
        //         e.preventDefault() ;
        //         return ;
        //     }
        // }
    };



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

    document.addEventListener('touchmove', touchmoveHandler, false);

});

Upvotes: 0

Charan Giri
Charan Giri

Reputation: 1097

Try this in your code

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

Hope this will help

Upvotes: 0

Arjun T Raj
Arjun T Raj

Reputation: 3207

If you are using phonegap 3 + then add 

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

to config.xml

enter image description here

Upvotes: 4

ares777
ares777

Reputation: 3628

Complete in your app config.xml file next line: - DisallowOverscroll ->> true - Delete any metatag like height=device-height in your html (Cordoba file). For background black color see if this helps: phonegap ios7 select dropdown gets black background

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

if you're using Cordova 2.3.0+ find config.xml and add this line:

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

or in Cordova 2.6.0+:

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

Upvotes: 5

Related Questions