覆蓋滾動禁用

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

在彈出的點擊左側和禁用滾動彈出按鈕，關閉菜單，並重新啓用滾動。