Search code examples
javascripthtmlcsslit-elementlit

Apply CSS class to the body when opening a menu

I'm currently working on a web project using LitElement, and I have a menu that shows when I click the hamburguer button, and closes when I click the close button or navigate to other page.

My problem is that I want to apply the CSS property overflow: hidden; in order to stop the scroll for the rest of the page (because my menu has 100% width and height), and remove that property when the menu is closed.

When I click the menu button, the component Menu is created, and when I click the close button (or navigate to another page) the component is deleted, so I have to apply the overflow in one component and remove it on another.

So, my question is, how to do that?

Solution

  • Try to use addEventListener like me below.

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

    .activeBurger {
   overflow:hidden;
}

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