菜单打开时body的overflow-y:hidden未生效，求问题排查

我实现了一个全屏菜单，希望点击#menu-button打开菜单时禁用body滚动，通过添加.no-scroll类（设置overflow-y:hidden）实现，但功能未生效。相关代码如下：

JavaScript代码 #

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') });

CSS代码 #

.no-scroll{
overflow-y:hidden
}

1. CSS优先级被覆盖 #

.no-scroll的样式可能被更高优先级的规则（比如body默认样式、带!important的样式）覆盖，导致overflow-y:hidden不生效。

解决方案：提高选择器优先级，明确指定body元素：

body.no-scroll {
  overflow-y: hidden !important;
}

2. 事件绑定导致状态不同步 #

你同时给menuButton绑定了onclick和addEventListener('click')两个事件，虽然逻辑上看似对应，但可能出现执行顺序或状态不匹配的问题（比如类的切换和菜单动画的播放状态不同步）。

解决方案：将类的切换逻辑整合到同一个点击事件中，避免分离绑定：

menuButton.onclick = function() {
  toggle = !toggle;
  if (!toggle) {
    // 打开菜单：播放动画，添加禁用滚动类
    menuAnimation.play(0);
    document.body.classList.add('no-scroll');
  } else {
    // 关闭菜单：播放回退动画，移除禁用滚动类
    menuAnimationBack.play(0);
    document.body.classList.remove('no-scroll');
  }
};

删除原来的menuButton.addEventListener('click', ...)代码，避免重复触发。

3. 移动端浏览器滚动特性问题 #

部分移动端浏览器中，仅给body设置overflow-y:hidden无法完全禁用滚动，因为浏览器的滚动行为可能绑定在html元素或视口上。

解决方案：同时给html和body设置样式，并添加触摸滚动禁止规则：

html.no-scroll, body.no-scroll {
  overflow-y: hidden;
  height: 100%;
  touch-action: none; /* 阻止移动端触摸滚动事件 */
}

切换类时同步操作html和body：

// 打开菜单时
document.documentElement.classList.add('no-scroll');
document.body.classList.add('no-scroll');

// 关闭菜单时
document.documentElement.classList.remove('no-scroll');
document.body.classList.remove('no-scroll');

4. 滚动容器不是body本身 #

如果页面的滚动是由某个内部容器（比如设置了overflow:auto的div）触发的，而非body，那么禁用body的overflow不会生效。

解决方案：找到实际的滚动容器，给它添加禁用滚动的类：

.scroll-container.no-scroll {
  overflow-y: hidden;
}

在菜单切换时，针对该容器进行类的添加/移除操作。

内容的提问来源于stack exchange，提问作者gjjr