防止主体滚动单击并关闭覆盖菜单CSS

Question

目前，我有一个通过单击即可启动的CSS叠加菜单。但是，其后面的页面仍可滚动。我敢肯定这是一个简单的修复程序，但是我是CSS / JS的新手，任何帮助都很棒！

目前，我有一个js切换功能，当点击.icon（汉堡图标）时，.mobilenav（叠加菜单）会淡入页面。

启用此切换功能后，我可以添加哪种功能来防止身体滚动？

我可以在下面轻松添加到此功能的任何内容吗？

    $(document).ready(function () {
    $(".icon, .link").click(function () {
        $(".mobilenav").fadeToggle(700);
        $(".top-menu").toggleClass("top-animate");
        $(".mid-menu").toggleClass("mid-animate");
        $(".bottom-menu").toggleClass("bottom-animate");
    });
});

Answer 1

我想您正在寻找这样的东西：

document.body.style.overflow="hidden"

为了能够再次滚动，请使用

document.body.style.overflow="scroll"

例：

document.body.style.overflow="hidden"

document.body.style.overflow="scroll"

另外，当您使用jQuery时，类似的方法也可以工作：

$('body').css('overflow', 'hidden'); // disables scrolling
$('body').css('overflow', 'scroll'); // enables scrolling