javascript - 防止单击和关闭覆盖菜单 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.onclick=function(){
  this.style.overflow="hidden"
}

Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>

此外，当您使用 jQuery 时，类似这样的方法也可以:

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