防止滚动除弹出框及其内容以外的所有元素

Question

我试图使以下行为发生：当显示popup元素时，我想防止任何和所有元素滚动，除非它们是popup及其内部的元素。 当前的行为是，在popup元素中滚动时，您将到达底部或顶部，而文档的其余部分继续滚动。

关于代码：

• 弹出窗口本身是一个固定的div，当单击锚点链接时会显示在页面上（单击时），因此单击锚点时应发生“防止滚动”操作。
• 我放置了随机元素来表示弹出窗口外部的内容无法控制样式。 因此，除了直接成为HTML元素之外，该内容是什么也没关系。

下面的jsFiddle包含了到目前为止我已经完成的工作。 我的问题当然是在“如何”抓住我需要防止滚动发生的这些元素上。

这是： jsFiddle 。

Your help is greatly appreciated!

Answer 1

您可以更改身体的溢出并执行以下操作：

// shows pop up
$("#showPopup").click(function () {

    $('body').css({
        overflow: 'hidden'
    });

    $(".popup").fadeToggle(500);
    $(".overlay").fadeToggle(500);
    // selects anything but the popUp and its children and 
    $('body > *:not(.popup)').css({
        "overflow-y": "hidden"
    });
});
// closes pop up
$(".closePopup").click(function () {

    $('body').css({
        overflow: 'auto'
    });

    $(".overlay").fadeToggle(500);
    $(".popup").fadeToggle(500);
    $('body > *:not(.popup)').css({
        "overflow-y": "scroll"
    });
});

显示弹出窗口时，将溢出设置为隐藏将隐藏滚动条。 然后，当您关闭它时，将溢出设置为自动，然后您可以滚动页面。