smooth-scrollbar.js实现全屏菜单打开时禁用滚动、关闭时恢复滚动

我懂你的困扰——用smooth-scrollbar的时候，普通的overflow:hidden或者scrollbar.destroy()都达不到预期效果，因为这个库接管了页面的滚动行为，得用它自带的API来精准控制。

scrollbar.destroy()是彻底销毁滚动实例，这显然不是你要的临时禁用效果。正确的做法是用smooth-scrollbar提供的**setScrollingEnabled()**方法，它可以一键切换滚动的启用/禁用状态，完美匹配你的菜单切换场景。

下面是修改后的完整方案，我会一步步说明：

第一步：初始化smooth-scrollbar实例 #

首先你需要先初始化页面的滚动实例，把它存在变量里方便后续调用：

// 初始化页面滚动实例，可根据需求调整阻尼参数
const scrollbar = Scrollbar.init(document.body, {
  damping: 0.07
});

第二步：修改菜单点击事件，添加滚动控制逻辑 #

在burger的点击事件里，我们通过判断GSAP时间线的反转状态，来决定是禁用还是启用页面滚动：

const burger = document.querySelector('#burger')
const tl = gsap.timeline()
tl.to('.menu-link', { translateY: '100%', duration: 0.5, })
tl.to('.menu-overlay', { width: '0' })

burger.addEventListener('click', () => {
  // 切换时间线的反转状态（控制菜单展开/收起）
  tl.reversed(!tl.reversed());
  
  // 根据菜单状态控制滚动
  if (tl.reversed()) {
    // 菜单关闭时，恢复页面滚动
    scrollbar.setScrollingEnabled(true);
  } else {
    // 菜单打开时，禁用页面滚动
    scrollbar.setScrollingEnabled(false);
  }
})

额外优化：菜单内部滚动（可选） #

如果你的菜单内容可能超过视窗高度，想要让菜单内部可以独立滚动，但页面主体保持禁用，可以给.menu-content单独初始化一个scrollbar实例：

// 给菜单内容单独初始化滚动实例
const menuScrollbar = Scrollbar.init(document.querySelector('.menu-content'), {
  damping: 0.07
});

// 调整点击事件逻辑，确保菜单打开时自身滚动可用
burger.addEventListener('click', () => {
  tl.reversed(!tl.reversed());
  
  scrollbar.setScrollingEnabled(tl.reversed());
  // 菜单打开时启用内部滚动，关闭时可选择禁用（按需调整）
  menuScrollbar.setScrollingEnabled(!tl.reversed());
})

完整整合代码 #

把所有部分整合后，最终的JavaScript代码如下：

// 初始化页面滚动
const scrollbar = Scrollbar.init(document.body, {
  damping: 0.07
});

// 初始化菜单内部滚动（可选）
const menuScrollbar = Scrollbar.init(document.querySelector('.menu-content'), {
  damping: 0.07
});

const burger = document.querySelector('#burger')
const tl = gsap.timeline()
tl.to('.menu-link', { translateY: '100%', duration: 0.5, })
tl.to('.menu-overlay', { width: '0' })

burger.addEventListener('click', () => {
  tl.reversed(!tl.reversed());
  
  // 控制页面滚动状态
  scrollbar.setScrollingEnabled(tl.reversed());
  // 控制菜单内部滚动状态（可选）
  menuScrollbar.setScrollingEnabled(!tl.reversed());
})

这样修改后，菜单打开时页面滚动会被完全禁用，关闭时自动恢复，而且比destroy方法更高效，不需要反复初始化和销毁滚动实例。

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