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

【问题标题】：How to disable scrolling in the background when the mobile menu is open?打开移动菜单时如何在后台禁用滚动？
【发布时间】：2014-12-01 14:49:06
【问题描述】：

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

到目前为止，这是我的 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;
    }

【问题讨论】：

位置：固定在主体上
@user3801433 但后来我无法滚动正文：X
嘿伙计，所以当菜单处于焦点时，即使用户到达菜单的底部，您也不会滚动正文。请加一个小提琴。
我无法发布代码：X 我是否使用位置：固定到整个页面正文？还是我只在包含 list/ul 标签的 div 上使用它
菜单打开时，将位置固定在主体上。关闭它时，删除该属性。更好地使用添加/删除类

标签： jquery css

【解决方案1】：

当菜单打开时，在 body 上设置position: fixed，在关闭时移除。

 .fixed-position {
    position: fixed;
 }

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

【讨论】：

设置body固定位置时网页回滚是否正常？

【解决方案2】：

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

【讨论】：

我尝试使用overflow:hidded;，但不太清楚为什么，在我的情况下不适用。请问有什么想法吗？ SO问题在这里stackoverflow.com/q/51776867/4642215
比position: fixed 工作得更好，因为它不会跳回顶部。谢谢！
当心overflow:hidden 不能解决 iOS 上的问题。
它似乎无法修复现代浏览器中的任何问题。我仍然可以滚动。
@LarsVandeDonk 不要忘记设置身高：100%

【解决方案3】：

解决这个问题的方法也略有不同。您可以将onclick 事件添加到您的按钮。然后在你的身体中添加/删除类（类似于上一个答案，但考虑到它之前的一个）。

将此添加到您的 head 部分：

<script>
      function lockScroll() {
            document.body.classList.toggle('lock-scroll');
      }
</script>

然后在 CSS 中定义类：

.lock-scroll {
    overflow: hidden;
}

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

【讨论】：

【解决方案4】：

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

touch-action: none;

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

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

【讨论】：

巧妙解决老问题！

【解决方案5】：

固定车身高度：

body.js-mobile-menu-open {
    overflow: hidden;
    height:100%;
}

【讨论】：

【解决方案6】：

我只会对@roko 的答案做一个小改动，因为我永远无法触发 else 语句。

$("body").toggleClass("fixedPosition");

然后造型：

.fixedPosition
 {
    position: fixed;
 }

【讨论】：

【解决方案7】：

这些解决方案都不适合我 - 但我找到了一个。

我在尝试其中一些答案时遇到的问题是我在 html 元素上设置了 overflow-y: scroll - 这导致此代码无法正常工作。

height: 100% 也没有达到我的目的 - 但 100vh 做到了。

以下对我有用：

html {
  overflow: auto;
}

body.js-mobile-menu-open {
  overflow: hidden;
  height: 100vh;
}

另一种解决方案是从html 中删除overflow-y: scroll 并应用这些body 样式。

【讨论】：

【解决方案8】：

我尝试了 lockScroll() 并且它起作用了，但我发现如果菜单意外关闭而不使用汉堡菜单，正文仍然有 lockscroll 类并且你不能再滚动，如果你再次点击汉堡菜单更糟糕按钮，它会删除类，然后您可以在菜单打开时滚动，在菜单关闭时不能滚动

【讨论】：

【解决方案9】：

在 React/Nextjs 中，您可以通过传统的 javascript 方法定位正文 - 只需添加

const body = document.getElementById("body")
body.classList.toggle("fixed_body")

像这样处理点击函数：

const handleClick = () => {
    const body = document.getElementById("body")
    setShowAside(!showAside)

    body.classList.toggle("fixed_body")
  }

这个类看起来像这样：

.fixed_body{
   overflow: hidden;
   block-size: 100%;
 }

当然还要在正文中添加 id

<body id="body">

【讨论】：