叠加滚动禁用

Question

所以，我有一个如下所示的叠加层（来自示例网站的屏幕截图）。

当菜单（A部分）打开时，它会在主div上显示一个叠加层（B部分）。

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

打开菜单（叠加层）时，有没有办法禁用主div上的滚动（B部分）？

谢谢！

Answer 1

如果菜单可见，则在点击事件上添加代码以禁用正文标签上的滚动

在菜单上单击，还原更改

Answer 2

这可以做到。 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 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的滚动

单击弹出按钮，关闭菜单并重新启用滚动。