覆盖滚动禁用

Question

所以，我有一个覆盖如下（从示例网站截图）。

打开菜单（部分A）时，它会在主格（部分B）上显示覆盖图。

但是，我仍然可以在菜单打开时滚动主div。

当打开菜单（覆盖）时，是否有办法禁用主div（B部分）上的滚动？

谢谢！

Answer 1

这是可以做到。 HTML：

<div class="overlay"> 
    <div class="overlay-content"> 
     <p>I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital.</p> 

     <p>You can swapnot sleeping in a penthouse... for not sleeping in a mansion. Whenever you stitch yourself up, you do make a bloody mess.</p> 

     <p>I'm Batman</p> 

     <p>Does it come in black?</p> 

     <p>Breathe in your fears. Face them. To conquer fear, you must become fear. You must bask in the fear of other men. And men fear most what they cannot see. You have to become a terrible thought. A wraith. You have to become an idea! Feel terror cloud your senses. Feel its power to distort. To control. And know that this power can be yours. Embrace your worst fear. Become one with the darkness.</p> 

     <p>You either die a hero or you live long enough to see yourself become the villain.</p> 
    </div> 
</div> 

<div class="background-content"> 
     <p>I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital.</p> 

     <p>You can swapnot sleeping in a penthouse... for not sleeping in a mansion. Whenever you stitch yourself up, you do make a bloody mess.</p> 

     <p>I'm Batman</p> 

     <p>Does it come in black?</p> 

     <p>Breathe in your fears. Face them. To conquer fear, you must become fear. You must bask in the fear of other men. And men fear most what they cannot see. You have to become a terrible thought. A wraith. You have to become an idea! Feel terror cloud your senses. Feel its power to distort. To control. And know that this power can be yours. Embrace your worst fear. Become one with the darkness.</p> 

     <p>You either die a hero or you live long enough to see yourself become the villain.</p> 
</div> 

CSS：

.overlay{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    background-color: rgba(0, 0, 0, 0.8); 
} 
.overlay .overlay-content { 
    height: 100%; 
    overflow: scroll; 
} 


.background-content{ 
    height: 100%; 
    overflow: auto; 
} 

Answer 2

添加代码上点击事件的body标签禁用滚动如果菜单可见

在菜单上单击，然后恢复更改

Answer 3

继承人概念的的jsfiddle快速证明

https://jsfiddle.net/zo86nvea/

CSS

.page { height: 200px; overflow-y: scroll; overflow-x: hidden; } 
.title { background-color: #000080; color: #fff; position: fixed; top: 0px; width: 100%; } 
.title span { cursor: pointer; } 
.menu { width: 100px; height: 200px; position: absolute; top: 0px; left: 0px; background-color: #F00000; display: none; } 

的jQuery

$(".title span").click(function() 
{ 
    $(".menu").css("display","block"); 
    $(".page").css("overflow-y", "hidden"); 
}); 

$(".menu").click(function() 
{ 
    $(".menu").css("display","none"); 
    $(".page").css("overflow-y", "scroll"); 
}); 

在打开的菜单，显示从底层DIV

在弹出的点击左侧和禁用滚动弹出按钮，关闭菜单，并重新启用滚动。