Question

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

关于代码：

弹出窗口本身是一个固定的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"
    });
});

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

除弹出窗口及其内容外，防止所有元素滚动

1 个答案: