javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动

Question

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

我已经搜索这个问题两天了，但找不到任何适合我的解决方案。

我想要的是向 body 添加一个 class，并且如果任何人尝试在其上滚动，它不应该滚动。但是，如果其他所有元素可以滚动，则它们都应该滚动。我已经阅读了很多 stackoverflow 答案，但没有什么对我有用。我已经 checkout ，solution 1 , solution 2 , solution 3 , solution 4和许多其他人..

PS:实际上，我正在实现 fancybox在我的应用程序中，它在 body 上打开一个模型屏幕，现在如果用户尝试在模型上滚动，模型 View 后面的 body 就会滚动。我想阻止这种情况发生。

我已经尝试过这个。

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

但它也会阻止在模型 View 内滚动。任何帮助将不胜感激!!

提前致谢。

场景如图所示，从 iPad mini 捕获

Answer 1

要防止滚动，您可以指定

body{
   overflow:hidden;
}

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

div{
   overflow-y:scroll;
}

您可以对垂直方向使用overflow-y属性，对水平方向使用overflow-x属性，或者对两者使用overflow属性