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!

Answer 1

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

Answer 2

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...

Answer 3

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.

Answer 4

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

Answer 5

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;