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

Question

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

有问题的截图：
。

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

标签： cssmobilescrollfrontend

Answer 1

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