本文介绍一种更可靠、性能更优的方案：利用 html `data-*` 属性与 css 类切换来统一管理页面滚动状态，避免直接操作 `document.body.style.overflow` 导致的样式冲突与重排问题。
在实现侧边弹出式子菜单（如登录面板、帮助菜单）时，一个常见需求是：菜单展开时禁用页面滚动，收起时恢复滚动。但许多开发者会尝试直接修改 document.body.style.overflow = 'hidden'，这种做法看似简单，却极易失效——尤其当 CSS 中已通过类（如 .dimmed）定义了 overflow: hidden，而 JavaScript 又未同步增删对应类名时，内联样式与 CSS 类之间会产生优先级冲突，导致行为不可预测。
更关键的是，直接操作 style 属性违背了关注点分离原则，也增加了维护成本。现代 Web 开发应优先使用语义化 class 控制状态，将样式逻辑完全交由 CSS 处理。
✅ 推荐方案：使用 data-toggle-class 属性 + classList.toggle() 统一驱动
首先，在触发元素上声明要切换的类名：
立即学习“前端免费学习笔记（深入）”；
<div id="right_nav"> <button type="button" data-toggle-class="is-subMenu">Help</button> </div> <div id="login-subMenu"> <button type="button" data-toggle-class="is-subMenu">Close ✕</button> </div>
然后，用简洁的事件委托统一处理所有此类按钮：
const elHtml = document.documentElement;
elHtml.addEventListener("click", (evt) => {
const elBtn = evt.target.closest("[data-toggle-class]");
if (!elBtn) return;
elHtml.classList.toggle(elBtn.dataset.toggleClass);
});该逻辑自动捕获任意带有 data-toggle-class 的点击目标（包括子菜单内的关闭按钮），并精准切换 html 元素上的对应类，无需手动判断开关状态或重复写 add/remove。
对应的 CSS 完全接管视觉与行为逻辑：
/* 禁用整个页面滚动（作用于 html 或 body 均可，推荐 html） */
.is-subMenu {
overflow: hidden;
}
/* 子菜单默认隐藏在视口外 */
#login-subMenu {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100dvh;
background: #ffdf6a;
transition: translate 0.5s ease;
translate: -100% 0; /* 完全左移隐藏 */
}
/* 当 .is-subMenu 存在时，子菜单滑入 */
.is-subMenu #login-subMenu {
translate: 0 0;
}
/* 可选：叠加暗色遮罩效果（通过同一 class 控制） */
.is-subMenu::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: -1;
}⚠️ 重要注意事项：
- 不要混合使用 style.overflow 和 CSS 类：二者优先级不同（内联样式 > CSS 类），易造成“设了却没生效”的假象；
- 避免对 body 设置 overflow: hidden：部分浏览器（如 Safari）在 body 上设置 overflow: hidden 无法完全阻止滚动，而 html 元素更可靠；
- 警惕滚动禁用带来的 UX 问题：突然禁用滚动会导致页面内容“上跳”（因滚动条消失后宽度变化），建议配合 padding-right: calc(var(--scrollbar-width)) 补偿（可通过 JS 动态读取）；
- 动画与滚动需协同：若子菜单有过渡动画，请确保 overflow: hidden 在动画开始前已生效（本方案中 class 切换立即触发，CSS 过渡自然衔接）。
总结：用 data-toggle-class 驱动状态、用 CSS 类封装行为，是更健壮、可扩展、易调试的现代实践。它消除了条件分支冗余，规避了样式竞争，也让主题切换、多状态联动（如同时启用暗色模式与菜单）变得轻而易举。
