防止在 Next JS 中滚动整个页面但允许组件滚动

Question

预期目标：我最终希望我的应用在顶部有一个固定的粘性菜单栏，然后是一个包含其余内容的 div/component 并且 不滚动，同时允许子组件在必要时自由滚动。我最终会在 Next JS 中构建它，但我什至不能让它在普通 HTML/CSS 中工作，所以我不确定在 Next 代码中应用的样式。我怀疑我必须将样式应用到最外层的 <body> 标签，但我尝试过的似乎都不起作用。我还怀疑（要使用 Next），我需要按照他们描述的方式覆盖文档 in the Next documentation 并将样式应用于 <body>。但首先，简单地说 HTML...

如果我用 糟糕、不正确的 伪代码编写此代码，我正在寻找：

<html>
  <nav style="sticky to top">
    <!-- Markup to render a menu. -->
  </nav>
  <body style="don't scroll; size=take up the rest of the page">
    <table style="overflow-y: auto"
      <!-- TONS OF TABLE ROWS. -->
    </table>
  </body>
</html>

我尝试了将 overflow: hidden 粘贴到树中几乎每个标签上的蛮力方法，但仍然没有任何效果。

我咨询了 and saw this close post（有一个简洁的答案）但不认为第二个 post 适用。

这是愚蠢的 HTML 我正试图开始工作（忽略粘性导航部分）：

<html>
  <nav>
    <div style="background-color: purple;">
      <p>Nav bar</p>
    </div>
  </nav>
  <body style="overflow:hidden">
    <div style="overflow: scroll">
      <table style="color: red; overflow:scroll">
        <tr><td>Item 1</td></tr>
        <!-- Repeated the above about 20 times. -->
      </table>
    </div>
  </body>
  <footer>
    <!-- Only put this here so the page bottom is obvious; not in my app. -->
    <p>Footer here</p>
  </footer>
</html>

对于它的价值，这是带有 Tailwind 的 Next/React 代码，它将成为主页的基础：

const AppLayout = ({ children }) => (
  <>
    <header className = "sticky top-0 z-50">
      <Menu />
    </header>
    <main id = "AppLayoutMain" className="relative bg-white antialiased overflow-hidden">
      {children}
    </main>
  </>
);

我以随机和非结构化的方式在其中添加了带有样式的额外标签，试图让它正常工作，但没有骰子。

如果有人能指出我的错误，或 post 任何简单有效的方法，我将不胜感激。我使用 tailwindcss，所以如果有帮助，您可以这样表达。

Answer 1

您应该能够通过使用 flex-col 并提供您的内容 div overflow-hidden 来完成此操作。类似于：

<div class="flex flex-col h-screen overflow-hidden">
  <div class="flex-shrink-0">Header content</div>
  <div class="overflow-hidden">
    <div class="w-40 max-h-full overflow-y-auto">
      Scrolling content
      ...
    </div>
  </div>
  <div class="flex-shrink-0">Footer Content</div>
</div>

查看实际效果：https://play.tailwindcss.com/bxUwAuCs8R（垂直缩小屏幕以查看滚动条）。

防止在 Next JS 中滚动整个页面但允许组件滚动

Prevent whole page scrolling in Next JS but allow components to scroll

html

css

next.js

tailwind-css