make screen unscrollable

eydg · 11-13-2012, 03:32 AM

I want to make an app in html and css and phonegap it.

For a more realistic standalone behavior i need to disable elastic dragging capability (vertical scrolling) at lower resolutions.

How to achieve that?

I found this, but it does not seem to work:

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
        <script type="text/javascript">
            window.addEventListener('load', function() {
                document.body.addEventListener('touchmove', function(e) {
                    e.preventDefault();
                }, false);
            }, false);
        </script>
        <title>Mobile Web App</title>
    </head>
    <body>
        <div id="app">
            <!-- Add your content here -->
        </div>
    </body>
</html>

Neither does this:

Code:

<body {overflow:hidden} >

VIPStephan · 11-13-2012, 08:13 AM

Try html, body {overflow: hidden;} ?

Labrar · 11-13-2012, 08:35 AM

First of all

PHP Code:


			
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

should work for the right resolution. (By the way. For a web app you have to use 640 x 920 for Iphones)
It doesn't matter if you convert it with phonegap. Still's just a web app but into the I Store (if apple take it)

Seccond

PHP Code:


			
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){    
                if(!e){e=window.event;}
        e.preventDefault();
                
    }

EDIT:
To make it more realistic use this also

PHP Code:


			
window.scrollTo(0,0,0);

So your url bar will dissapear

eydg · 11-14-2012, 04:02 AM

Thank you very much for clarifying this simple fact that some lines of the code are not js, I made an assumption that whatever is not apparent html, it must be js

I have tried the following css

Code:

<style> html, body {overflow: hidden;} 
</style>

and it does remove the vertical scrolling bar from the browser.

I have done the adjustments to the code and run an android simulator, and there seems to be no change. Here's what I typed in:

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  





<?php
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){    
                if(!e){e=window.event;}
        e.preventDefault();
}  

window.scrollTo(0,0,0);  
?>

Philip M · 11-14-2012, 08:10 AM

This is not php - it is Javascript. Labrar used the wrong tags.

Code:

<script type = "text/javascript">
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){    
if(!e){e=window.event;}
e.preventDefault();
}  
</script>

Labrar · 11-14-2012, 08:27 AM

Thats true

Sorry

eydg · 11-14-2012, 05:03 PM

It does work! Many thanks.

In case someone needs it summed up, here it is:

Code:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
<script type = "text/javascript">
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){    
if(!e){e=window.event;}
e.preventDefault();
}  
</script>

</head>

<body>


<style> html, body {overflow: hidden; } 
</style>

eydg · 11-14-2012, 06:25 PM

Quote:

Originally Posted by Philip M

This is not php - it is Javascript. Labrar used the wrong tags.

Code:

<script type = "text/javascript">
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){    
if(!e){e=window.event;}
e.preventDefault();
}  
</script>

This piece of code does the trick in chrome, but in android simulator stops the app buttons and links from responding.

I wonder if it could be a matter of placement of the piece, but as I changed its location no chance resulted in either of the two environments.

AndrewGSW · 11-14-2012, 06:51 PM

If you just want to prevent dragging then this might work:

Code:

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

..but I don't program for phones myself.

AndrewGSW · 11-14-2012, 06:56 PM

If you want to continue to allow dragging of specific elements then it might be something like this:

Code:

document.ontouchmove = function (e) {
    var target = e.currentTarget;
    if (target.nodeName == 'IMG') {
        // or examine ID, etc..
       return;
    }
    e.preventDefault();
};

but, again, I'm not mobile

eydg · 11-14-2012, 07:38 PM

Thanks, but in either case, the screen keeps scrolling in Android simulation.