在移动设备上滚动后菜单下的空白区域

Question

我有位置固定的菜单元素，当您点击/触摸变暗区域时，它就会隐藏起来。问题是，每当您滚动网站时，这个空白区域会在隐藏之前出现在菜单下

有问题的屏幕截图：
。

我尝试为菜单元素添加更多高度并设置溢出：隐藏以在菜单处于活动状态时禁用滚动，但没有帮助。我也试图搜索这个，但我真的很难用单词提出准确的问题来找到一些相关的答案或提示。

Answer 1

我了解了 position: fixed 的实际工作情况，并想出了如何解决我的问题的想法。所以基本上，在触摸设备上，固定位置仅以一种方式工作（例如：如果您设置 top: 0 和 bottom: auto（或 top: 0 和 bottom: 0)，菜单隐藏前底部会有一个空白区域，如果设置 bottom: 0 和 top: auto 会有相反的效果）。所以我想出了创建另一个具有相同背景颜色和相同动画效果的图层，但使用 bottom: 0 和 top: auto 来防止顶部出现这个空白/菜单的底部。所以基本上，是的，它确实解决了我的问题。也许有人面临同样的问题，所以我决定写下这个答案。

Answer 2

感谢@eisbehr 教我如何使用它和一个很好的教训，我删除了我之前的答案。

body {
  margin: 0;
}
.forceHeight {
  position: relative;
  height: 200vh;
  background-color: lightgrey;
}

.menu {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="forceHeight">
  <div class="menu">
    this is your fixed menu
  </div>
  asdf this has a lot of content
</div>