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

.html

Thanks!

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./forum/iphone-sdk-development/996-turn-off-scrolling-bounces-uiwebview.html

Thanks!

• javascript
• objective-c
• ios
• cordova
• mobile-safari

• Do you get any errors in the Error Console for any of the solutions? – woz Commented May 26, 2012 at 2: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 Commented May 29, 2012 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 Commented May 29, 2012 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 Commented May 29, 2012 at 15:01
• The link I posted also looks like it also has a PhoneGap solution. You may want to try it. – woz Commented May 29, 2012 at 15:10

5 Answers 5

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

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

Based on your ment, 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.

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

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;