How to disable bouncing in html5 fullscreen iphone app?

Question

I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:

 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="viewport" content="width=device-width, user-scalable=no" />

What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.

Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?

EDIT: status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?

http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html — Derek 朕會功夫, Apr 07 '13 at 20:54

score 15 · Accepted Answer · answered Mar 11 '12 at 02:33

15

This will prevent scrolling on the whole page

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

In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document

scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

answered Mar 11 '12 at 02:33

dmanxiii

51,473
10
33
23

1

Is this solution working for you? This indeed stopped the bouncing when running from within safari, when on the stand-alone web page (via the "add to home page" link) the page keeps bouncing... – liorda Apr 14 '13 at 18:27
1

Good attempt, works for most part. Except when the element that has scrolling enabled is scrolled to the top or bottom. Then the bounce effect is still triggered. – mrt Jul 29 '13 at 11:15
While this works, I've encountered problems where this seems to cause tap/click interactions like buttons to fail sometimes (presumably, if there was any movement of the contact while triggering the click). For now my workaround for that is to not call preventDefault if e.target is a button, link, or input element. – Brandon Paddock Sep 21 '15 at 20:08

score 1 · Answer 2 · answered Sep 12 '12 at 18:40

1

If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO

answered Sep 12 '12 at 18:40

Thierry Blais

2,848
22
41

Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead: http://stackoverflow.com/a/12394389/419 – Kev Sep 12 '12 at 21:58

score 1 · Answer 3 · answered Jan 19 '17 at 17:10

1

Extending dmanxii's approach here is what we are doing.

    $("body").on("touchmove", function (event) {
        if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
            //console.log("NOT Disabled"); 
        }
        else {
            //console.log("Disabled"); 
            event.preventDefault();
        }
    });

answered Jan 19 '17 at 17:10

AbidCharlotte49er

914
1
8
11

cool so .WhatEverClass are the classes you want to make sure PreventDefault does not trigger on – Alex Borsody Mar 05 '21 at 17:03

How to disable bouncing in html5 fullscreen iphone app?

3 Answers3

Linked