全屏菜单触发display:none导致页面滚动条重置问题求助

问题根源在于：当给#main添加含display:none的.hidden类时，浏览器会将该元素从渲染树中完全移除，页面的滚动上下文被破坏，导致滚动位置被重置到顶部。

要解决这个问题，我们需要替换display:none的隐藏方式，改用既能隐藏元素、又能保留其在DOM/渲染树中存在的方案，从而维持滚动上下文。

具体修改步骤 #

1. 修改SCSS中的.hidden类实现 #

将原有的display:none替换为视觉隐藏但保留元素存在性的样式，以下两种方案可选：

// 方案1：完全移出视口，不占用布局空间（推荐）
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden; // 确保元素不可见
}

// 方案2：保留布局空间，仅视觉隐藏（适合需要维持页面布局结构的场景）
// .hidden {
//   visibility: hidden;
//   opacity: 0;
//   pointer-events: none; // 防止元素意外接收点击事件
// }

2. 验证逻辑 #

你的TypeScript和HTML代码无需修改——因为只是替换了.hidden类的样式实现，菜单的显示/隐藏触发逻辑可以完全保持原样。

方案原理 #

• display:none会彻底移除元素，导致页面滚动容器的内容高度突变，浏览器被迫重置滚动位置；
• 改用绝对定位移出视口或visibility:hidden时，元素仍然存在于DOM和渲染树中，页面的滚动上下文未被破坏，滚动位置会被完整保留。

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