在高度避免 Y 滚动条：100vh；分别h屏;

Question

我想水平和垂直对齐一个元素，但 y 滚动条有问题。

这是关于成功页面的。结构简单：导航栏、主页面、页脚。我使用 TailwindCss。主要是我会以一个图标为中心，上面写着谢谢！垂直和水平。我也可以使用 flex。

<div>
  <h2 class="text-3xl text-center my-10 ">some text</h2>
  <div class="flex h-screen justify-center items-center bg-gray-500">
    <div class="text-center text-green-500 text-3xl">
      <svg class="w-40 h-40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      THANK YOU!
    </div>
  </div>
  <div class="text-center my-10">beautiful footer</div>
</div>

这里是示例的链接：https://play.tailwindcss.com/gWnstjwGur

我的问题

但是，我的问题是现在 Y 滚动条是可见的。这是我不想要的。这显然是由于h-screen。如果没有 Y 滚动条，我该如何实现。

Answer 1

如果您想制作一个没有滚动的整页，请在包装器上使用overflow-y: hidden;。这样你根本无法垂直滚动。

如果您仍然希望能够滚动但只是没有滚动条：

::-webkit-scrollbar {
  display: none;
}

.remove-scrollbar {
  -ms-overflow-style: none;  /* IE + Edge */
  scrollbar-width: none;  /* Firefox */
}

<div class="remove-scrollbar">
  <h2 class="text-3xl text-center my-10 ">some text</h2>
  <div class="flex h-screen justify-center items-center bg-gray-500">
    <div class="text-center text-green-500 text-3xl">
      <svg class="w-40 h-40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      THANK YOU!
    </div>
  </div>
  <div class="text-center my-10">beautiful footer</div>
</div>