如何在移动菜单打开时禁用后台滚动？

Question

我正在构建一个具有导航菜单的移动响应网站.当我到达菜单底部时 - 如果我到达菜单底部继续滚动 - 它会在后台滚动页面.我该如何禁用它？

到目前为止这是我的jQuery代码:

// When the document is loaded...
$(document).ready(function() {

    $('#mob-menu-btn').click(function(){
        $('.sports').slideToggle("slow");
    })

    $('#sub-menu').click(function(){
        $('.sports2').slideToggle("slow");
    })

});

这是我的CSS:

    .list{
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
        top: -10%;
        overflow: hidden;
        overflow-y: auto;
}


    .sports li{
        list-style-image:none;
        list-style-type: none;
        border-bottom: 2px solid #eeeeee;
        margin-bottom: 0px; 
        margin-left: 0px; 
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 10px;
        width:100%;
        font-family: arial;
        text-decoration: none;
        overflow: hidden;
    }

Answer 1

要为“滚动移动菜单”问题提供替代解决方案，overflow您可能希望尝试在菜单上设置以下内容，而不是控制属性：

touch-action: none;

假设菜单完全覆盖主要内容，无论用户打开还是关闭地址栏，都会阻止触摸滚动。

您会发现它得到了很好的支持：https://caniuse.com/?search=touch- action 。根据您的用例，这可能会更简洁。

Answer 2

菜单打开时,将位置固定在主体上.关闭它时,删除该属性.更好地使用添加/删除类.

 if($('#mob-menu').is(':visible'))
 {
    $('body').addClass("fixedPosition");
 }
 else
 {
    $('body').removeClass("fixedPosition");
 }

 .fixedPosition
 {
    position: fixed;
 }

Answer 3

position: fixed您可以使用而不是使用(这会导致您在打开菜单时跳回到顶部)overflow: hidden.如果您在页面中的某个位置并打开菜单,则不会跳回到顶部.(也许跳跃是我如何编写代码的问题,但它对我有帮助).

Answer 4

这个问题的方法也略有不同.您可以在按钮上添加onclick事件.然后在你的身体上添加/删除课程(类似于之前的答案,但考虑到它之前的那个).这就是为我工作的东西,但是按下了按钮我有复选框,检查切换我的移动菜单.

将此添加到您的头部:

<script>
      function lockScroll() {
            if ($('body').hasClass('lock-scroll')) {
                $('body').removeClass('lock-scroll');
            }
            else {
                $('body').addClass('lock-scroll');
            }
      }
</script>

然后在CSS文件/部分中指定一个类:

.lock-scroll {
    overflow: hidden;
}

这将是你的按钮:

<button type="button" id="#mob-menu-btn" onclick="lockScroll();">Click me!</button>