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

Question

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

关于代码：

弹出窗口本身是一个固定的 div，当单击锚点 link 时，它会出现在页面上（单击时），因此 'prevent scroll' 操作应该在锚点被点击时发生点击。
我已经放置了随机元素来表示弹出窗口之外的内容不受您的控制来设置它的样式；因此，除了直截了当的 HTML 元素之外，这个内容是什么并不重要。

下面的 jsFiddle 包含我到目前为止所取得的成就。我的问题当然是 'how' 获取这些我需要防止滚动发生的元素。

这里是：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"
    });
});

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

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

Prevent all elements from scrolling except a popup and its contents

html

javascript

css

jquery

popup