首页 文章

单击并关闭叠加菜单css时防止正文滚动

提问于
浏览 次
0

目前我有一个通过点击启动的叠加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");
    });
});
javascript css menu overlay

2 回答

  • 3

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

    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
    回复于
  • 0
    $(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;
  }
    回复于

相关问题