"overflow-y:hidden" not being applied to body when menu opened-CodePudding

I have a fullscreen menu, when the user clicks the menu button to open the menu "#menu-button", I need to disable scrolling on the body. I'm pretty certain the below code should be working by adding the class ".no-scroll" to the body when the menu button is clicked, but it's not. Can anyone indicate what the issue might be?

var menuAnimation = gsap.timeline({paused:true});
var menuAnimationBack = gsap.timeline({paused:true, reversed: true});
var navMain = document.getElementById("nav-main");
var menuButton = document.getElementById("menu-button");
var toggle = true;

gsap.set('.link',{y:30});

menuAnimation
        .to(navMain, {duration:.8, width: '100%', clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", ease: "power2.inOut", x:0, y:0, z:0})
.to('.link',{duration:.5,autoAlpha:1,y:0,stagger:.2,ease: "power4.out"});


menuAnimationBack
.to('.link',{duration:.5,autoAlpha:0,y:30,stagger:.2,ease: "power4.out"})
.to(navMain, {duration:0.55,width: 0, clipPath: "polygon(0 0, -100% 0, 100% 100%, 0 100%)", ease: "power4.in", x:0, y:0, z:0});

menuButton.onclick = function() {
  toggle = !toggle;
  toggle === false ? menuAnimation.play(0) : menuAnimationBack.play(0);
};

menuButton.addEventListener('click', () => {   document.body.classList.toggle('no-scroll') });

.no-scroll{
overflow-y:hidden
}

CodePudding user response：

add your no-scroll class on html tag, hope it will work for you

menuButton.addEventListener('click', () => {
    document.querySelector("html").classList.toggle("no-scroll")
});