So, I have an overlay like below (screenshot from example site).
When the menu (Section A) is opened, it brings up a overlay on the main div (section B).
However, I can still scroll the main div when the menu is opened.
Is there a way to disable the scrolling on the main div (Section B) when the menu (overlay) is opened?
Thanks!
Add a code on click event to disable scroll on the body tag if the menu is visible
On menu click, revert the changes
This can be done. 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;
}
Heres a quick proof of concept in 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");
});
On open menu, show the flyout from the left and disable scroll of the underlying div
On click of flyout, close the menu and re-enable the scrolling.
