【问题标题】:Prevent body scroll on click and close of overlay menu css防止在单击和关闭覆盖菜单 css 时滚动正文
【发布时间】:2015-03-25 17:30:30
【问题描述】:

目前我有一个通过单击启动的覆盖 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


    【解决方案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
    

    【讨论】:

    • 刚刚为切换添加了我的 js 函数的 sn-p。我可以添加什么来启用你上面说的那些功能吗?
    • @Nir 自己做真的很难吗?或者这是一个家庭作业,你不知道你在做什么?我为您提供了一种方法,并为您展示了示例。
    • 太棒了,对不起,我对此很陌生,所以我有点困惑。我可以让滚动停止,但是一旦单击链接或关闭覆盖,正文仍然卡在溢出隐藏状态。发生动作后如何将滚动添加回正文?谢谢!
    • @Nir 究竟是哪个动作?
    • 所以我将 $('body').css('overflow', 'hidden'); 添加到 jQuery 函数中,但是一旦用户单击导航链接或再次点击图标,我想返回到 overflow=scroll。
    【解决方案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;
      }
    

    【讨论】:

    • 谢谢,我试过了,但没有成功。背景仍然是可滚动的。有什么想法吗?
    猜你喜欢
    • 2018-04-03
    • 2011-10-13
    • 2018-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多