如何在....仍然允许滚动时停止页面滚动？答案

【问题标题】：How to stop page scrolling while....still allowing scrolling?如何在....仍然允许滚动时停止页面滚动？
【发布时间】：2012-05-09 20:59:25
【问题描述】：

我正在使用 PhoneGap 制作移动应用。我有这个--

function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);

您知道如何通过拖动将页面从智能手机屏幕上拖出一小段距离，然后当您松开它时它会立即弹回？而你看到的背后都是黑色的？这就是这段代码要防止的。确实如此。

但它也阻止了所有标准滚动，例如滚动列表。有谁知道解决办法吗？

【问题讨论】：

我认为解决这个问题的方法是测试页面是否由于事件而移出屏幕，然后只阻止默认。
你在 EARTH 上是如何测试的？
禁用可能会使人们习惯于手机上的这种行为。只是需要考虑的事情。

标签： javascript jquery cordova scroll mobile-application

【解决方案1】：

Cordova 1.7+ 的简单解决方案在您的 Xcode 项目中找到 Cordova.plist。顶部会显示“UIWebViewBounce”。将此设置为否。

【讨论】：

【解决方案2】：

你有两个选择：

iScroll - 超级有效地提供这种效果。当然，它确实有其局限性。
-webkit-overflow-scrolling:touch;在 ios 5 中引入了一种新的 css 方法，它运行良好，但在 phonegap 中也有其局限性。

我个人将 iScroll 用于 phonegap 应用程序，如果您没有超大的滚动项目列表，它会非常有用。如果您正在寻找一种更原生的方式，我建议使用溢出滚动方法，这已被证明会在 webview 中引起一些奇怪的效果。 Phonegap 使用 webview 与移动 safari，因此您的支持有所不同。

iScroll - http://cubiq.org/iscroll-4 webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

【讨论】：

【解决方案3】：

你应该在你的 head 标签中添加这个：（现在不需要你的监听器代码）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

这基本上会禁用缩放（放大/缩小）和您不想要的拖动效果。因此页面不会滚动，但仍然可以跟踪 touchmove 事件。

【讨论】：

遗憾的是我已经有了它，但它并没有产生预期的结果。