4

As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas?

Im using jquery.mobile btw :)

Update: I actually managed to get the code from the first answer working somewhat:

function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );

The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me). But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet.

Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.

Kasper Skov
  • 1,954
  • 10
  • 32
  • 53
  • 4
    Could you enumerate the things you've tried? It might help avoid some unhelpful answers. – Steven Oxley Mar 12 '12 at 15:14
  • @Steven tried position:fixed on body. Disables horizontal scroll. Tried the answer from jroyce in 2 different ways. Copy/pasting directly from the answer from jroyce didnt work at all, and using another answer from stackoverflow using only one of the events resulted in the form being useless (no focus available on the controls). Any ideas? – Kasper Skov Mar 13 '12 at 13:34
  • 1
    Excellent. Unfortunately, I don't have too much experience with this particular problem, but I find that it helps to add as much detail as possible to provide whoever is trying to help you with the information they need. – Steven Oxley Mar 13 '12 at 14:14
  • Without knowing what you've already tried, here is a solution that may help you: [disable vertical bounce](http://stackoverflow.com/questions/3128196/iphone-html5-app-scrolling-question/3128400#3128400) If this does not resolve it for you, please include specifically what you have tried thus far. – jroyce Mar 12 '12 at 17:16

2 Answers2

1

use this view port specify your initial zoom level and maintain minimum and maximum zoom level

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Sam Kaz
  • 432
  • 3
  • 12
1

I found this answer : https://stackoverflow.com/a/20477023/2525304

They are basically detecting when the user is reaching the top/bottom of the page and then catch the scrolling event with event.stopPropagation(); to prevent any more scrolling.

Maxime
  • 2,192
  • 1
  • 18
  • 23