Avoiding Y-scrollbar at height: 100vh; resp. h-screen;

user_14807111 0
Viewed 796

I want to align an element horizontally and vertically and have problem with the y-scrollbar.

It's about a success page. Simple structure: navbar, main, footer. And I use TailwindCss. In the main I would center an icon with the words Thank You! vertically and horizontally. Which I can also do with 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>

Here the Link to the example: https://play.tailwindcss.com/gWnstjwGur

My Question

However, I have the problem here that now the Y-scrollbar is visible. Which I don't want. It is clearly due to h-screen. How can I implement this without the Y-scrollbar.

tailwind-css scrollbar css
1 Answers

If you want to make a single full-page that has no scrolling, use overflow-y: hidden; on your wrapper. This way you can't scroll vertically at all.

If you still want to be able scroll but just not have a scrollbar:

::-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>

user_147768090
Related