next.js 修正了当我使用overflow-y滚动条时页面的导航条重叠滚动条[关闭]

b4qexyjb 于 12个月前发布在其他

关注(0)|答案(1)|浏览(89)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
6天前关闭
Improve this question的
我需要做一个页面，其中有捕捉滚动和固定的导航条，应该始终停留在顶部。我遇到的问题是导航条重叠的滚动条在右边，它不应该是这样的。当我删除溢出-y属性从主要部分它得到罚款，但捕捉滚动不再工作。
下面是Tailwind Play的代码：https://play.tailwindcss.com/zOVGwmnNzE

next.js

来源：https://stackoverflow.com/questions/77736960/fixed-navbar-overlapping-scrollbar-of-the-page-when-i-use-overflow-y-scroll

1条答案

按热度按时间

hujrc8aj1#

您可以考虑删除<nav>元素上的position: fixed。这意味着<nav>元素将成为页面布局流的一部分，但也意味着它不会覆盖<main>的滚动条。
但是，由于<nav>元素的高度，<main>的底部将溢出屏幕。因此，为了保持先前的行为，请考虑在<body>元素上使用垂直Flex布局，以便<main>根据剩余的可用空间进行扩展/收缩。

<html lang="en">
  <script src="https://cdn.tailwindcss.com/3.4.0"></script>
  
  <body class="flex flex-col h-screen">
    <nav
      class="flex flex-no-wrap items-center justify-between px-10 py-2 bg-slate-500"
    >
      <div>
        <p>logo</p>
      </div>
      <div class="flex flex-row gap-10">
        <ul class="flex flex-row items-center gap-5">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/about">Profile</a>
          </li>
        </ul>
        <div
          class="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden"
        >
          <img
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="profile"
            width="40"
            height="40"
          />
        </div>
      </div>
    </nav>
    <main class="snap-y snap-mandatory overflow-y-scroll grow">
      <div class="flex flex-1 h-full w-full bg-black snap-start">
        <p>page 1</p>
      </div>
      <div class="flex flex-1 h-full w-full bg-slate-500 snap-start">
        <p>page 2</p>
      </div>
      <div class="flex flex-1 h-full w-full bg-amber-300 snap-start">
        <p>page 3</p>
      </div>
    </main>
  </body>
</html>

字符串

赞(0）回复(0）举报 12个月前

我来回答

next.js 修正了当我使用overflow-y滚动条时页面的导航条重叠滚动条[关闭]

1条答案

相关问题

热门标签

最新问答