"body" 溢出隐藏或通过 onclick 函数滚动

Question

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

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

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

Answer 1

两个问题，您没有在已经 'hidden' 之后删除样式，并且您在 onclick 的末尾漏掉了引号。下面的代码将在它们之间切换之前检查 body overflow 是否被隐藏。

<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' "/>

如果您要切换 class，这应该可行。其中 mystyle 是您要切换的 class 的 class 名称。

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

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