(# SOLVED #) Issue: how to prevent screen to pull down on ios (iPhone). when you scroll the finger on touch screen

[Rodrigo_M_1]

Hello everyone, I spend last entire day researching for a solution for this problem that I'm not sure even if it's possible to be solved!

All my application I have build in Intel and even the templates ones have the same issue, and I just realized this when I need to work with a Grid!

While I was testing my grid, I was scrolling the data on the grid with the finger, and then I realize that some times when reach the end of the grid data, the screen starts "scrolling" too (vertically)!

So, my question is how to fix it ? How to Lock the screen to prevent this kind of issue ?

Note: You have a "gap" when you scroll up or down!

Note: I don't want to lock the Orientation of the screen!

By the way follow a picture of the problem I'm facing!

Thanks!

[Elroy_A_Intel]

i recommend adding the CSS overflow property to the component that you would like to prevent scrolling on.

Here is a resource on overflow property: http://www.w3schools.com/cssref/pr_pos_overflow.asp

[Rodrigo_M_1]

Elroy Ashtian Jr (Intel) wrote:

i recommend adding the CSS overflow property to the component that you would like to prevent scrolling on.

Here is a resource on overflow property: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Hi Elroy, thanks for the tip, but the problem is with the entire whole screen, not with the components!

If you create any app with Intel, compile and install on your iphone, and slide your finger on the screen vertically, you will see a gap between your app "form" from top or botton!

Do you know what I mean ?

Thanks!

[Hamilton_Tenório_da_]

@Rodrigo>

Try to put in your main CSS:

body {
    overflow-x:hidden;
...

I am not sure, but I have some apps with this and they don´t drag the screen.

[Rodrigo_M_1]

Hamilton Tenório da Silva wrote:

@Rodrigo>

Try to put in your main CSS:

body {
    overflow-x:hidden;
...

I am not sure, but I have some apps with this and they don´t drag the screen.

Hi Hamilton, thanks for the help, but I still facing the problem!

I have created a new app for test without any code... just with a header and button on it to test if I can lock the screen, but no success...

Maybe I'm doing something wrong... but in this app I just added to the command line on app.css !

Actually I have added both lines:

body {
    overflow-x: hidden;
    overflow-y: hidden;
    /* margin: 0.5rem ; */
    background: white ;
    color: black ;
}

I'm attach the application template that just contais a header and button without any code... just with the app.css changed (added those codes) and still not locking the screen!

Please let me know if I'm doing something wrong!

Thanks!

Regards,

Rodrigo.

[Hamilton_Tenório_da_]

@Rodrigo>

Try to put this line in config.additions.xml:

<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />

I am not sure if this affect iOS too.

[Rodrigo_M_1 · Accepted solution]

Hamilton Tenório da Silva wrote:

@Rodrigo>

Try to put this line in config.additions.xml:

<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />

I am not sure if this affect iOS too.

Hi Hamilton, I have checked my config.additions.xml file, and it's already have this line on it ! Really strange...

By the way I was able to use some javascript to prevent that!

Follow the javascript code if anyone needs it ! Just put in a global class javascript file and load up on all "forms" and it will do the job!

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

[Hamilton_Tenório_da_]

@Rodrigo> Thank you for the script. I will test it too.