如何在移动 Web 应用程序中禁用 iPhone 上的垂直弹跳/滚动 [英] How to disable vertical bounce/scroll on iPhone in a mobile web application

问题描述

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

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?

我正在使用 jquery.mobile 顺便说一句 :)

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

我一开始不能让它工作的原因是我的身体实际上有一些边缘(愚蠢的我).但.由于布局流畅，我使用 jquery.mobile 并具有 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 在标题中(我认为)它不能正常工作.页面被缩小(像桌面浏览器一样查看)并且缩放被禁用.如果没有代码，页面可以完美地从 50 英寸电视缩放到地球上最小的诺基亚.

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.

我做错了吗?我开始认为问题是由正文/内容以某种方式超过 100% 的视口引起的.不知道怎么做.

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.

推荐答案

我找到了这个答案:https://stackoverflow.com/a/20477023/2525304

他们基本上检测用户何时到达页面的顶部/底部，然后使用 event.stopPropagation(); 捕获滚动事件以防止更多滚动.

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 上的垂直弹跳/滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！