防止身体滚动但不能触摸设备上的任何父div

Question

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

我一直在寻找这个问题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

中捕获

Answer 1

正如adeneo所建议的，在激活模态时将溢出设置为隐藏在身体上。

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

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

编辑另外，请尝试阻止叠加滚动（'.fancybox-overlay'）而不是身体

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

Answer 2

要防止滚动，您可以指定

body{
   overflow:hidden;
}

允许滚动到身体内的任何其他div

div{
   overflow-y:scroll;
}

对于

，可以对vertical，overflow-x属性使用overflow-y属性作为horizo​​ntal或overflow属性