Issue
I need to make a page which has snap scroll and a fixed navbar which should always stays on the top. the issue that I'm encountering is the navbar is overlapping the scroll bar on the right and it shouldn't be like this. when I remove the overflow-y property from the main section it gets fine but the snap scroll is not working anymore. how can I solve the issue?
here is the code on Tailwind Play: https://play.tailwindcss.com/zOVGwmnNzE
Solution
You could consider removing the position: fixed
on the <nav>
element. This will mean the <nav>
element will be part of the page layout flow, but also means that it will not cover the scrollbar of <main>
.
With the <nav>
element's height however, the bottom of the <main>
will overflow the screen. So to keep the previous behavior, consider using a vertical flex layout on the <body>
element, so that the <main>
grows/shrinks to the remaining space available.
<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>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.