防止主体滚动单击并关闭覆盖菜单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

Answer 2

    $(document).ready(function () {

        $(".icon, .link").click(function (event) {
            event.preventDefault();
            $('body').toggleClass('overflow');
            $(".mobilenav").fadeToggle(700);
            $(".top-menu").toggleClass("top-animate");
            $(".mid-menu").toggleClass("mid-animate");
            $(".bottom-menu").toggleClass("bottom-animate");
        });
    });

   Add the below piece of code into css file

  .overflow
  {
     overflow:hidden;
  }