无法滚动菜单 - 内容 "behind" 菜单滚动

Question

我基于tailwindcss 创建了一个小菜单。它工作正常，但有一点：如果此菜单显示在移动设备上，用户将滚动 "behind" 菜单页面的内容。所以有些菜单项无法显示。

我创建了一个代码笔来演示这一点：

我是这样定义固定菜单位置的：

<div class="bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 fixed">
        <div class="flex items-center justify-between px-4 py-3 md:p-0">
            [...]
        </div>
</div>

我还创建了一个 gif 来展示我的意思 - 只需单击图像即可启动 gif 动画：

我不确定为什么会这样。我想我把固定位置搞砸了。所以我非常感谢您的帮助 - 我的目标是拥有一个可滚动并固定在移动设备上的菜单。

Answer 1

那是因为你在那里申请了fixed。对于小屏幕，你可以使用 absolute 之类的东西，这取决于你想要实现什么。

但是 absolute md:fixed 应该可以修复它。从那里，您可以根据需要进行调整。

Answer 2

我可以看到两个可能的解决方案，一个涉及 JavaScript，另一个不涉及。

我会推荐没有 JavaScript 的解决方案，稍后，用 JavaScript 增强它。

第一个解决方案是在导航栏上使用粘性位置而不是固定位置。

我创建了一个 codepen here 来演示它（调整大小 "mobile layout"）。

好的部分是开箱即用，只有 class 变化（粘性 class）：

<div class="bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 sticky">
  <div class="flex items-center justify-between px-4 py-3 md:p-0">
    [...]
  </div>
</div>

缺点是菜单不固定。

为此，我们需要一些 JavaScript（未添加到 codepen）。

基本上我们需要防止 "body" 溢出（在您的情况下，不是实际的正文，而是包含内容的区域）并添加底部属性来分隔导航栏除了导航上的 overflow-y: scroll; 之外的高度。

我创建了 this codepen 来说明它。再次，在 "mobile layout".

中查看

这些是涉及的 classes：

.header-wrapper {
  bottom: 0;
  overflow-y: scroll;
}

body {
  overflow: hidden;
}

我将此 class 添加到 header 元素的第一个子元素：

<header class="lg:mb-20">
    <div class="header-wrapper bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 fixed">
  </div>
</header>

您只需要将此 class 添加到移动设备，并且仅在菜单打开时添加。

希望对您有所帮助！

Answer 3

鉴于您的菜单是 full-screen，您可以使用一个技巧。简短的故事：让你的 body 位置固定，然后让你的菜单处于相对位置，这样你就可以自然滚动。

假设您将整个用户界面包裹在一个容器中（一个简单的 div 就足够了）而不是直接放置在您的 body 中，则应适用以下内容。

打开菜单后，执行以下操作：

const uiContainer = document.getElementById('ui-container');
uiContainer.style.position = 'fixed';

/* Store scrollX and scrollY in some safe location.
 * You will need them when the menu closes. */
uiContainer.style.top = `-${window.scrollY}px`;
uiContainer.style.left = `-${window.scrollX}px`;
uiContainer.style.width = '100%';

菜单关闭时，执行以下操作：

uiContainer.style.position = null;
uiContainer.style.width = null;
uiContainer.style.top = null;
uiContainer.style.left = null;

window.scrollTo(savedScrollX, savedScrollY);

然后您可以将菜单作为 child 添加到 body 并使用 position: relative 设置样式，滚动将自然地由任何浏览器处理。

HTH

无法滚动菜单 - 内容 "behind" 菜单滚动

Can not scroll menu - content "behind" the menu scrolls

html

css

tailwind-css