防止页面滚动答案

【问题标题】：Prevent Page Scrolling防止页面滚动
【发布时间】：2011-12-06 17:03:31
【问题描述】：

我正在使用 jQuery mobile 开发移动应用程序，但遇到以下问题：

我有一个菜单，里面有一个带有垂直滚动的 div。一旦滚动到达容器的底部，它就会开始滚动页面本身，这不是我想要的。有没有办法防止这种行为？我的意思是，允许将菜单的滚动滚动到底部，当它发生时，当我在菜单上滚动时拒绝页面滚动？

更新：

这是一个具有相同问题的原始示例 - http://jsfiddle.net/Wg8pk/。

如果你向下滚动“菜单选项”，当菜单到达末尾时它会向下滚动页面。

【问题讨论】：

听起来你有一些糟糕的css标记导致滚动（总是推动容器） - 至于你的问题，你总是可以 .css( 'overflow', 'hidden' ) 或添加一个具有该规则的类到元素
垂直滚动下有内容吗？如果那是页面的底部，你应该没问题。有页脚吗？
现在我的菜单下没有内容。菜单有一个 position: absolute ，它的动态高度是通过设置 top: 202px 和 bottom: 3px 来设置的，overflow-y: auto 以便垂直滚动在它应该出现的时候出现。这个菜单没有 jQuery mobile 的解剖结构，因为它不在 data-role="page" 内，因为它出现在所有页面上。我还做了一个测试，在 data-role="content" 中放置一个带有垂直滚动的 div，问题仍然存在。
你可能想看看stackoverflow.com/q/7600454/925897

【解决方案1】：

在你正在滚动的元素上调用event.preventDefault()怎么样：

$('#my-scroll-div').bind('touchmove', function (event) {
    event.preventDefault();
});

我不确定绑定到哪个事件会更好，但touchmove 似乎可以工作。如果您设置了代码的 jsfiddle，我们可以提供更好的建议。

【讨论】：

这是一个存在相同问题的原始示例 - jsfiddle.net/Wg8pk。如果向下滚动“菜单选项”，当菜单到达末尾时，它会向下滚动页面。
@Sérgio jsfiddle.net/Wg8pk/1 我在我的 Android 设备上进行了测试，当我尝试滚动 #mainNavigation 元素时它不起作用。
@Jasper 的目的不是阻止#mainNavigation，而是在#mainNavigation 的滚动到达末尾时阻止页面滚动。

【解决方案2】：

你需要让菜单有一个固定的高度，然后使用 css 来防止溢出。用户overflow:hidden; 应该可以工作

【讨论】：