打开菜单时将 CSS class 应用于正文

Question

我目前正在使用 LitElement 开发一个 Web 项目，我有一个菜单，当我点击汉堡包按钮时会显示，当我点击关闭按钮或导航到其他页面时会关闭。

我的问题是我想应用 CSS 属性 overflow: hidden; 来停止页面其余部分的滚动（因为我的菜单有 100% 的宽度和高度），并在菜单关闭时删除属性。

当我点击菜单按钮时，组件 Menu 被创建，当我点击关闭按钮（或导航到另一个页面）时组件被删除，所以我必须应用 overflow 在一个组件中，然后在另一个组件中将其删除。

所以，我的问题是，该怎么做？

Answer 1

尝试像下面的我一样使用addEventListener。

document.querySelector('.burger').addEventListener('click', () => {
   document.body.classList.toggle('activeBurger');
})

.activeBurger {
   overflow:hidden;
}

<button class="burger"></button>

Apply CSS class to the body when opening a menu