5

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?)

5
  • 1
    Does this answer your question? How to hide a mobile browser's address bar? Commented Apr 24 at 10:25
  • 1
    It's definitely relevant, but I'm not sure it completely fixes the issue. I don't necessarily want the website to be in full-screen mode by default, I'd like the user to be able to scroll away their address bar themselves.
    – KamielDev
    Commented Apr 24 at 11:04
  • 1
    There were also 1-2 solutions there that convinced the browser that you had already started scrolling by 1px, but I would also be interested in a better solution than this. Commented Apr 24 at 11:56
  • 1
    I think your requirements are related to the browser it self , and how the browser react with the pages and users. Commented May 11 at 21:40
  • I do think that it is likely that this feature is just missing browser support, thus it is likely that there is no way to program this (yet). I hope I can be proven wrong!
    – KamielDev
    Commented May 22 at 17:01

3 Answers 3

-1

Hi you can check this it will help you:

<script>
  let lastScrollTop = 0;

  window.addEventListener('scroll', function() {
    let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    if (currentScroll > lastScrollTop) {
      // Downscroll code
      window.scrollTo(0, 1); // Hide browser bar
    }
    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
  });

  // Add smooth scrolling behavior for the carousel
  document.getElementById('carousel').addEventListener('wheel', function(event) {
    event.preventDefault();
    const delta = Math.sign(event.deltaY);
    this.scrollBy(0, delta * window.innerHeight);
  });
</script>

In this code: We use JavaScript to detect the initial scroll event. When the page is first scrolled, we scroll the page by 1 pixel after a short delay to trigger hiding the browser bar. This gives users a full-screen experience of the website before they start scrolling through the carousel pages.

We add smooth scrolling behavior to the carousel using the wheel event. When the user scrolls inside the carousel, we prevent the default scroll behavior and manually scroll the carousel vertically. This allows users to scroll through the carousel pages only after the browser bar has been hidden.

1
-1

you can try this, i think this will work with you :

body{
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}

.middle{
  overflow: auto;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
</head>
<body>
    <nav class="top h-[4rem] bg-red-300">Nav</nav>
    <div class="middle 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="bottom h-[4rem] bg-red-700">Footer</footer>
</body>
</html>

tell me.

2
  • This does not seem to accomplish it, the address bar doesn't scroll away at all.
    – KamielDev
    Commented May 22 at 16:57
  • @KamielDev you can not hide the address bar using CSS/HTML/JS , this depends on the browser behavior and how does it deal with the website to give the use the best experience. like chrome , when you scroll the address bar disappears , but when we talk about an other browser it will be different , this thing is not specified by a language. Commented Jun 1 at 11:56
-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Address Bar</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        .content {
            height: 200vh; /* Ensure content is taller than viewport */
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- Your content here -->
    </div>

    <script>
        // Function to hide the address bar on mobile
        function hideAddressBar() {
            if (!window.location.hash) {
                if (document.height <= window.outerHeight + 10) {
                    document.body.style.height = (window.outerHeight + 50) + 'px';
                    setTimeout(function() {
                        window.scrollTo(0, 1);
                    }, 50);
                } else {
                    setTimeout(function() {
                        window.scrollTo(0, 1);
                    }, 0);
                }
            }
        }

        window.addEventListener('load', function() {
            hideAddressBar();
            window.addEventListener('orientationchange', hideAddressBar);
        });
    </script>
</body>
</html>

1
  • This doesn't hide the address bar at all on my end. Did you try it yourself? i.sstatic.net/H3cLlleO.gif I took your example and replaced the <Your content here> with the content from my post.
    – KamielDev
    Commented May 29 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.