Software Archive
Read-only legacy content
17061 Discussions

Disable slide down to refresh app

Isaiah_L_
Beginner
893 Views

When i compile Cordova apps swiping down refreshes the game how can i disable that?

0 Kudos
4 Replies
Elroy_A_Intel
Employee
893 Views

If you want to disable scrolling, I recommend using the overflow-y: hidden in your .css file for the desired element.

0 Kudos
Amrita_C_Intel
Employee
893 Views

Hello,

Multiple solutions

1)<!-- disable reset on vertical swipe down --> 
<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" /> 

2)

// Function to disable "pull-to-refresh" effect present in some webviews.
// Especially Crosswalk 12 and above (Chromium 41+) runtimes.

// Adapted from this example: https://code.google.com/p/chromium/issues/detail?id=456515#c8
// Source: Copyright (c) 2015 by jdduke (http://jsbin.com/qofuwa/2/edit)
// Source: Released under the MIT license: http://jsbin.mit-license.org

// <input id="preventPullToRefresh"  type="checkbox">Prevent pull-to-refresh?</input>
// <input id="preventOverscrollGlow" type="checkbox">Prevent overscroll glow?</input>
// <input id="preventScroll"         type="checkbox">Prevent scroll?</input>

window.addEventListener('load', function() {
//  var preventPullToRefreshCheckbox  = document.getElementById('preventPullToRefresh') ;
//  var preventOverscrollGlowCheckbox = document.getElementById("preventOverscrollGlow") ;
//  var preventScrollCheckbox         = document.getElementById("preventScroll") ;

    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) ;
    }

    // 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() ;
                // 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) ;
}) ;
 
 
0 Kudos
Isaiah_L_
Beginner
893 Views
Perfect. So for option one. Do I just add that line somewhere in the projects tab somewhere in the xdk?
0 Kudos
Elroy_A_Intel
Employee
893 Views

I recommend assigning it to the appropriate element that is scrolling via a .css file or inline.

Inline

<link>
<selector> {
    overflow-y: hidden
}
</link>

.CSS file

<selector> {
    overflow-y: hidden
}

For more information on selectors, visit http://www.w3schools.com/cssref/css_selectors.asp

0 Kudos
Reply