I want to have a website that has a fixed navbar at the top of my page, and the rest of the content should be scrollable.
I can achieve that using this setup:https://play.tailwindcss.com/Y31avA7qZq?size=502x680
<main class="flex flex-col text-foreground"><nav class="fixed w-full h-24 bg-black">Nav.</nav><div class="h-[calc(100vh-6rem)]"><div class="mt-24 h-[calc(100vh-6rem)] overflow-y-scroll"><slot /></div><footer class="min-h-24">Footer.</footer></div></main><style> html { @apply bg-gradient-to-b from-red-500 to-red-900 bg-fixed; } body { @apply min-h-[100dvh]; }</style>This works great, and in mobile devices, it looks like you're scrolling the browser UI away before you start scrolling through the content. However, I do have one small gripe with this solution: the scrollbar appears from the very top of the page (which means, the scrollbar appears over the navbar, which doesn't look like it's scrollable content). The behaviour is demonstrated in a screen recording here: https://i.imgur.com/zjf778G.mp4 (I tried converting the videos into a gif, but they were still too large for file upload here)
Just for prettyness, I would like to somehow constrict the scrollbar to the bottom of the navbar and the bottom of the viewport.
I tried to restrict the part below the navbar and make only that overflow scroll, like so: https://play.tailwindcss.com/H3hLu7Hpee?size=502x680
<main class="text-foreground flex flex-col"><nav class="fixed h-24 w-full bg-black">Nav.</nav><div class="h-[calc(100vh-6rem)]"><div class="mt-24 h-[calc(100vh-6rem)] overflow-y-scroll"><slot/></div><footer class="min-h-24 bg-red-500">Footer.</footer></div></main><style> same as above</style>However, this results into two scrollbars, one for the page, one for the content, and, when you scroll in the bottom part, you have to scroll all the way to the end of the content before the 'actual' page continues scrolling and hides the browser ui. This is of course expected behaviour, so this can't be a solution to the problem: https://i.imgur.com/Fpgbsqt.mp4
So now I'm wondering, what is the best way to approach this?
Is it possible to either
- Scroll overflow content only when the browser ui is hidden
- Constrict the visual looks of the browser scrollbar so that it looks like it only starts below the navbar
Or is my only solution to:
- Hide the browser scrollbar and make a custom element myself ?