“body”溢出隐藏或通过onclick功能滚动答案

【问题标题】："body" overflow hidden or scroll via onclick function“body”溢出隐藏或通过onclick功能滚动
【发布时间】：2020-08-19 23:58:32
【问题描述】：

我有一个下拉菜单，如果打开 (100vh + 100 vw) 会覆盖整个页面，当我单击下拉菜单按钮时，我会尝试禁用正文的滚动。

由于某种原因，在点击时添加和删除类对我不起作用，但直接添加样式对我来说非常有效：<a href="#" onclick="document.body.style.overflow = 'hidden';>

但是再次单击链接不会将溢出设置为再次滚动，所以有人可以帮助我吗？

【问题讨论】：

【解决方案1】：

两个问题，你没有在它已经“隐藏”之后删除样式，并且你错过了 onclick 末尾的引号。下面的代码将在它们之间切换之前检查body溢出是否被隐藏。

<a href="#" onclick="document.body.style.overflow = document.body.style.overflow == 'hidden' ? 'auto' : 'hidden' "/>

我还建议在用于运行 javascript 时使用 button 插入 a 元素。

<button onclick="document.body.style.overflow = document.body.style.overflow == 'hidden' ? 'auto' : 'hidden' "/>

如果您正在寻找切换课程，这应该可以。其中mystyle 是您要切换的类的类名。

<button onclick="document.body.classList.toggle('mystyle')"/>

如果切换类不起作用，则您有一个特殊性问题，即其他 css 样式应用于“切换类”，您可以通过开发人员工具中的元素选项卡进行检查。

【讨论】：

非常酷，非常感谢您确实做到了这一点。我还想问一下是否有一种控制机制来检查主体的溢出状态，因为我实际上在标题中有五个下拉菜单按钮，如果有人不小心误点击了相邻的按钮，它很容易变成记忆游戏。
答案很大程度上取决于下拉菜单的工作方式？它是否受控并基于 JavaScript？还是纯html和css？
我使用 Bootstrap（第一次），我通常会在这里使用 addClass 但我使用的脚本已经有两个单独的主体元素用于夜间和白天模式（有大量的 if/else 条件）和我的编码技能还不够先进，无法像菜鸟一样更改相关文件，这就是为什么我正在寻找一种务实的方法......所以我使用基于 Bootstrap 的脚本。