CODEWITHSUNDEEP
jquerycss
Steve Kim
Steve Kim

Reputation: 5591

Overlay scroll disable

So, I have an overlay like below (screenshot from example site).enter image description here

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!

Upvotes: 2

Views: 384

Answers (3)

Morvael
Morvael

Reputation: 3567

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.

Upvotes: 1

andyderuyter
andyderuyter

Reputation: 1111

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;
}

Upvotes: 1

Lucky Chingi
Lucky Chingi

Reputation: 2258

Add a code on click event to disable scroll on the body tag if the menu is visible

On menu click, revert the changes

Upvotes: 1

Related Questions