如何在移动Web应用程序中禁用iPhone上的垂直反弹/滚动

问题描述

正如标题所说，我需要在我的移动网络表单应用程序上禁用iphone上的垂直反弹。我尝试了很多不同的东西，但大多数都禁用我的形式或水平滚动和弹跳。有什么想法？

我正在使用jquery.mobile btw：）

更新：
我实际管理从第一个答案得到的代码有点工作：

  function stopScrolling（touchEvent）{touchEvent.preventDefault（）; } 
 document.addEventListener（'touchstart'，stopScrolling，false）; 
 document.addEventListener（'touchmove'，stopScrolling，false）; 
  

我之所以无法让它首先工作的原因是，实际上有一些余量在我身上（愚蠢的我）。
但是。由于布局是流畅的，我使用jquery.mobile并且< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1>标题中的（我认为）它无法正常工作。页面缩小（从桌面浏览器查看）并禁用缩放。如果没有这些代码，页面就可以完美地从50英寸的电视到地球上最小的诺基亚。

我做错了什么？我开始认为问题是由于身体/内容以某种方式超过视口的100％而导致。不知道怎么回事。

解决方案

我找到了这个答案：

event.stopPropagation（）; 捕获滚动事件以防止再滚动。

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.

解决方案

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.

这篇关于如何在移动Web应用程序中禁用iPhone上的垂直反弹/滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！