防止正文滚动，但不能在触摸设备上滚动任何父 div答案

【问题标题】：Prevent body from scrolling but not any parent div on touch devices防止正文滚动，但不能在触摸设备上滚动任何父 div
【发布时间】：2014-07-16 10:37:50
【问题描述】：

如果'not-scroll' 类附加在我的body 上，我希望它不要滚动，否则它应该可以正常工作。

我一直在寻找这个问题 2 天，但找不到任何适合我的解决方案。

我想要的是将class 添加到body，如果有人尝试滚动它，它不应该滚动。但是，如果可以在其中滚动，则每隔一个 element 应该滚动。我已经阅读了很多 stackoverflow 的答案，但对我来说没有什么是可行的。我已经检查过了，solution 1,solution 2,solution 3,solution 4 和许多其他人..

PS：实际上，我在我的应用程序中实现了fancybox，它在body 上打开了一个模型屏幕，现在如果用户尝试在模型上滚动，模型视图后面的body 滚动。我想防止这种情况发生。

我试过了。

$(document).on('touchmove',function(event) {
     if($('body').hasClass('no-scroll')) {
         event.preventDefault();
     }
});

但它也防止在模型视图内滚动。任何帮助将不胜感激！

提前致谢。

场景如图，截取自 iPad mini

【问题讨论】：

不能阻止滚动，但是可以在modal可见时去掉溢出。

标签： javascript jquery scroll touch

【解决方案1】：

为了防止滚动，您可以指定

body{
   overflow:hidden;
}

允许滚动到正文中的任何其他 div

div{
   overflow-y:scroll;
}

你可以使用overflow-y属性来表示垂直，overflow-x属性表示水平或者overflow属性都可以

【讨论】：

感谢您的回答。但我无法将我的身体更新为“溢出：隐藏”或“高度：100%”。
这真的适用于 iOS7 吗？对我来说不是。弹性体滚动仍处于启用状态。并通过 document.body.addEventListener( 'touchmove', function(event) {event.preventDefault();}, false ) 将其关闭会禁用所有元素可滚动。

【解决方案2】：

按照 adeneo 的建议，在激活模态时将溢出设置为隐藏在正文上。

$('body').css('overflow','hidden');  //set overflow hidden

当对话框关闭时，将溢出添加为自动

编辑：另外，尝试防止滚动覆盖（'.fancybox-overlay'）而不是正文

EDIT-2：尝试将整个内容包含在一个包装器中并滚动它而不是正文。（参考THIS）。

【讨论】：

这也防止在模型的任何子 div 内滚动。
@hemkaran_raghav 现在检查解决方案
我也试过了，但它给我带来了两个问题，首先是，如果我在向下滚动主体后打开模型，它会将主体滚动到顶部。其次是 iOS 中的弹跳效果。
@hemkaran_raghav 尝试阻止滚动覆盖（'.fancybox-overlay'）