Disable vertical bounce effect in an ipad web app

Question

Is there a way to disable the bounce effect in a scrolling div?

So far I have tried these things but none worked. Please help!

How to disable vertical bounce/scroll on iPhone in a mobile web application

Can't disable bounce with UIScrollView and pagingEnabled=YES

ipad safari: disable scrolling, and bounce effect?

Disable UITableView vertical bounces when scrolling

And

http://www.iphonedevsdk.com/forum/iphone-sdk-development/996-turn-off-scrolling-bounces-uiwebview.html

Thanks!

Do you get any errors in the Error Console for any of the solutions? — woz, May 26 '12 at 02:53
Ok. Some of your links mention UIScrollView or UITableView, so those won't help you if you are making an HTML page. Can you post your implementation of one of the JavaScript techniques you used? — woz, May 29 '12 at 12:22
This is one of the approaches that I have used - document.ontouchmove = function(event) { event.preventDefault(); } var myDiv =document.getElementById("scrollableDiv"); myDiv.ontouchmove = function(event) { event.stopPropagation(); } — imhere, May 29 '12 at 14:58
I have wrapped this web app in XCode using PhoneGap. Also tried myScrollView.bounces=NO; And [(UIScrollView*)[webview.subviews objectAtIndex:0] setAllowsRubberBanding:NO]; Here I need the div to scroll but not bounce. Not sure if it's possible. — imhere, May 29 '12 at 15:01
The link I posted also looks like it also has a PhoneGap solution. You may want to try it. — woz, May 29 '12 at 15:10

perfect_element · Answer 1 · 2012-09-20T01:04:05.297

6

If you're using Cordova 1.7, just open the Cordova.plist file and set the key UIWebViewBounce to NO.

edited Sep 20 '12 at 01:04

answered Sep 06 '12 at 01:50

perfect_element

663
9
15

1

Fortunately this guy found a better solution, Thank you! – Thierry Blais Sep 12 '12 at 18:39

score 3 · Answer 2 · answered Mar 06 '13 at 08:11

3

Open your phoneGap project's config.xml file and change UIWebViewBounce from default true to false:

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

Can't imagine why the default is true...

answered Mar 06 '13 at 08:11

JOM

8,139
6
78
111

3

I believe the new preference if you have a later version of phonegap/cordova is At least that's what worked for me with cordova 2.7.0 – russter Jun 07 '13 at 18:18
The last comment of russter works perfect for me in cordova 3.3 My life was saved. thx. – JSG33kC0d3 Feb 06 '14 at 17:07

woz · Answer 3 · 2012-05-29T15:20:22.403

1

Based on your comment, the code your are using is the disable scrolling altogether. If you want scrolling, but without the bounce effect, try something like this:

var xStart, yStart = 0;

document.getElementById("scrollableDiv").addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});

document.getElementById("scrollableDiv").addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

I found this solution here. Let me know if it works for you.

edited May 29 '12 at 15:20

answered May 29 '12 at 14:56

woz

10,888
3
34
64

Thanks but this disables bouncing as well as scrolling. – imhere May 29 '12 at 15:13
I just edited the code. I should have used `document.getElementById("scrollableDiv").addEventListener(...` instead of `document.addEventListener(...` in both places. That might be why it didn't work. – woz May 29 '12 at 15:21

score 1 · Answer 4 · edited May 23 '17 at 12:07

This will help you out place the .scroll class on the element you wish to still have scrolling.

Whats happening is all touch moves are disabled by default. If the element you wish to scroll has the .scroll class on it then it sets the gate to true to allow it to pass.

On touch end you reset the gate to false.

This works on IOS5 and 6 and could work in Chrome and Safari

Look @ this post to extend it
How to prevent page scrolling when scrolling a DIV element?

The only catch to this is that if you over scroll the scrollable element the elastic effect allows the scroll to be passed up the tree while scroll is set to true. Manually setting the scroll position gets overridden by the dreaded bounce effect.
I bet those Apple friggers have a native implementation of scroll running in a set time out with each step hard wired in.

So if you scroll to -20, I think it hard wires each step into a loop not checking where it was. Scrolling to -20 -19 -18 etc in sequence.

We must think of a way around this! ( in fact typing it out load I have an idea! )

$(function(){
  var scroll = false
  var scroll_element;
  $('body').on('touchmove',function(e){
      if(!scroll){
      e.preventDefault()
      }
  })
  $('body').on('touchend',function(e){
      scroll = false
  })  
  $('.scroll').on('touchstart',function(e){
      scroll_element = this
      scroll = true
  })  
})

imhere · Accepted Answer · 2012-06-04T19:24:43.973

0

I know this may not be the best way but it works.

Here is what I did -

#scrollableDiv {
    position:fixed;
    top:50px;
    width:300px;
    height:500px;
    word-wrap: break-word;
    overflow-y: scroll; 
}

document.getElementById("scrollableDiv").innerHTML = longText;
document.getElementById("scrollableDiv").scrollTop = 0;

edited Jun 04 '12 at 19:24

answered Jun 04 '12 at 19:12

imhere

4,405
7
26
25

To avoid horizontal bouncing, make sure the content does not overflow. – imhere Jun 04 '12 at 19:19

Disable vertical bounce effect in an ipad web app

5 Answers5

Linked

Related