-1

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?

RodionJando
  • 3
  • 1
  • Zero experience with lit, but can't you just `addEventListener` to the open button to add class to body, and another `addEventListener` to the close button to remove it ? – LSE Nov 17 '21 at 16:38
  • Welcome. Please see [ask] and take the [tour]. You need to provide more information. – isherwood Nov 17 '21 at 19:25

1 Answers1

0

Try to use addEventListener like me below.

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

.activeBurger {
   overflow:hidden;
}

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