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

【问题标题】：How to disable vertical bounce/scroll on iPhone in a mobile web application如何在移动 Web 应用程序中禁用 iPhone 上的垂直弹跳/滚动
【发布时间】：2012-03-29 00:08:45
【问题描述】：

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

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

更新：我实际上设法从第一个答案中获得了一些工作的代码：

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 英寸电视扩展到地球上最小的诺基亚。

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

【问题讨论】：

您能列举一下您尝试过的事情吗？它可能有助于避免一些无益的答案。
在不知道您已经尝试过什么的情况下，这里有一个可以帮助您的解决方案：disable vertical bounce 如果这不能为您解决问题，请具体说明您迄今为止尝试过的内容。跨度>
@Steven 试过位置：固定在身体上。禁用水平滚动。以两种不同的方式尝试了 jroyce 的答案。直接从 jroyce 的答案复制/粘贴根本不起作用，并且仅使用一个事件使用来自 stackoverflow 的另一个答案导致表单无用（控件上没有可用的焦点）。有什么想法吗？
@Steven 我更新了问题
优秀。不幸的是，我对这个特定问题没有太多经验，但我发现添加尽可能多的细节有助于为任何试图帮助你的人提供他们需要的信息。

标签： iphone jquery-mobile webforms

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用此视口指定您的初始缩放级别并保持最小和最大缩放级别

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【讨论】：

禁用用户缩放严重影响可用性。
我可能会影响可用性，但是您可以使用媒体查询来增加 UI 元素的大小。