Disable vertical reflection effect in ipad web application

Question

Is there a way to turn off the bounce effect in a scrollable div?

So far I have tried these things, but no one has worked. Please, help!

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

Unable to disable bounce using UIScrollView and pagingEnabled = YES

ipad safari: disable scroll 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

I know this is not 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; 

Answer 2

If you are using Cordova 1.7, simply open the Cordova.plist file and set the UIWebViewBounce key to NO .

Answer 3

Open your phoneGap project config.xml project and change the default UIWebViewBounce true to false:

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

I can not imagine why the default value is true ...

Answer 4

Based on your comment, the code you use is disabled scrolling in general. If you want to scroll, but without a 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 this works for you.

Answer 5

This will help you place the .scroll class on the element you still want to scroll.

What happens, all touches move by default. If the element you want to scroll has the .scroll class on it, it sets the gate to true to allow it to pass.

At the end of the contact, you reset the shutter to false.

This works on iOS5 and 6 and can work on Chrome and Safari.
Check out @ this post to expand it
How to prevent page scrolling while scrolling a div element?

The only catch is that if you scroll the scrollable element, the elastic effect allows you to scroll the scroll on the tree, and the scroll - true. Manually adjusting the scroll position is canceled due to the terrible bounce effect.
I bet these Apple frigates have a built-in scrolling implementation that runs on a set timeout with every complex wired step.

So, if you scroll to -20, I think these are hard wires, every step in the loop, not checking where it was. Scrolling to -20 -19 -18, etc. in sequence.

We must think about it! (in fact, having typed this 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 }) })