I want to have a page that has a layout a little like this:
<nav>...</nav> <!-- navbar with a fixed height -->
<main> <!-- a carousel container with 'the rest of the height' -->
<div>...</div> <!-- page A that takes up the full carousel container height -->
<div>...</div> <!-- page B that takes up the full carousel container height -->
</main>
<footer>...</footer> <!-- a footer with a fixed height -->
To achieve this, I have the setup in the attached code snippet. The snippet works as intended on a desktop browser. The navbar and footer are always visible, and the scrollable pages snap to the next one on scroll.
However, on mobile browsers, the user experience of having a static address bar doesn't feel right to me. On mobile browsers, I tend to scroll the page down a little to first hide the top address bar, and then start reading the content on the page. However, as a large part of my website is a scrollable area with this layout, you flip through the carousel pages instead of scrolling away the address bar. Only when you scroll outside the scrollable area (on the navbar or footer) the address bar hides. This also happens when you hit the bottom page, and there is no more scrollable content.
Is it possible to alter this behaviour in such a way that a user scrolls away the address bar first - giving users a full-screen experience of the website - and then if they scroll any further, start scrolling through the carousel pages?
I feel that this may be in strides with how scrollable areas are expected to behave, but to me it feels more intuitive for this specific website design, as the scrollable area is page-wide instead of i.e. a small container that scrolls through some pictures.
.carousel {
display: inline-flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
background: blue;
}
.carousel-vertical {
display: flex;
flex-direction: column;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.carousel-item {
box-sizing: content-box;
display: flex;
flex: none;
scroll-snap-align: start;
}
<script src="https://cdn.tailwindcss.com"></script>
<nav class="h-[4rem] bg-red-300">Nav</nav>
<div class="carousel carousel-vertical bg-red-500 h-[calc(100dvh_-_8rem)]">
<div class="h-[calc(100dvh_-_8rem)] bg-blue-300 carousel-item">a</div>
<div class="h-[calc(100dvh_-_8rem)] bg-blue-500 carousel-item">b</div>
</div>
<footer class="h-[4rem] bg-red-700">
Footer
</footer>
I'd like to know, from a credible source, what the current feasability of this behaviour is. Is it, in current browsers, possible or impossible to do this? If it is possible, please provide a working example. If it is impossible, please provide a credible source that supports your claim. (For example - has there been a feature request for this behaviour that has been purposefully rejected?)