如何修改代码实现关闭全屏菜单时移除假滚动条？

你当前的代码在每次点击菜单按钮时，都会给body设置固定的margin-right作为假滚动条，但没有在菜单关闭时移除这个样式，导致关闭后页面出现两个滚动条。可以通过判断菜单的状态，动态添加/移除假滚动条样式来解决：

修改后的代码 #

var menuButton = document.getElementById("menu-button");
menuButton.addEventListener('click', () => {
   const htmlEl = document.querySelector("html");
   // 获取隐藏滚动条前的页面宽度
   let oldWidth = document.documentElement.clientWidth;

   // 切换控制原生滚动条显示的CSS类
   htmlEl.classList.toggle("no-scroll");

   // 获取切换后的页面宽度
   let newWidth = document.documentElement.clientWidth;

   // 根据菜单状态设置/移除假滚动条
   if (htmlEl.classList.contains("no-scroll")) {
       // 菜单打开时：计算真实滚动条宽度，设置margin-right占位
       const scrollbarWidth = newWidth - oldWidth;
       document.body.style.marginRight = `${scrollbarWidth}px`;
   } else {
       // 菜单关闭时：清除margin-right，移除假滚动条占位
       document.body.style.marginRight = "0px";
       // 也可以用 removeProperty 彻底清除样式：document.body.style.removeProperty('margin-right');
   }
});

关键修改说明 #

1. 缓存DOM元素：提前获取html元素，避免重复查询DOM提升性能
2. 判断菜单状态：通过classList.contains("no-scroll")判断当前是打开还是关闭菜单
3. 动态计算滚动条宽度：用切换前后的页面宽度差值得到真实滚动条宽度，比硬写8px更兼容不同浏览器和系统
4. 清除占位样式：菜单关闭时把body的margin-right重置为0，彻底移除假滚动条的占位

配套CSS说明 #

确保你的no-scroll类正确隐藏原生滚动条：

html.no-scroll {
    overflow: hidden;
}

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