Search code examples
htmlcss

Stick an element horizontally only works on desktop, not mobile

Please note: You can use JavaScript (even though the bounty says otherwise), I am open to it, thank you. Also the main issue is not the scroll bar width, but the white space to the right of the header in mobile view.

Trying to make a layout that has a header, that scroll vertically off the page like normal. But if one uses the HTML scrollbars (important that it's the HTML scroll bars, so one does not have to hunt for the horizontally scrolls bars, the HTML scroll bars are always shown at the bottom of the viewport), with the header stuck horizontally. It's a layout for where the content is wider than the viewport, but one wish to have the header always shown horizontally, but allow it to scroll vertically off the screen for screen space.

When one scrolls to the right, next to the header is generally a blank open space, I wish for the header to stay sticky horizontally (but as mentioned before scroll vertically).

Here you can see when I scroll horizontally on desktop, the golden header stays in the place and fills the full width. enter image description here

But as soon as you switch to mobile it no longer works, you can see the white gap here when I scroll horizontally, instead of the header remaining stuck in place:

enter image description here

This code snippet does not switch to mobile view, so you have to copy and paste this into a file and try it for yourself if you wish to see what's going on in mobile:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- For mobile device scaling -->
<style>
    * {
        box-sizing: border-box;
    }
    html {
        overflow-y: scroll;
        width: max-content;
    }
    body {
        margin: 0;
    }
    header {
        background: goldenrod;
        border-right: 1px solid red;
        position: sticky;
        left: 0;
        width: calc(100vw - 15px);
    }
    main {
        width: 120vw;
        height: 120vh;
        background: gray;
    }
</style>
</head>

<body>
    <header> Header
    </header>
    <main>
        <div>Main stuff</div>
        <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
    </main>
</body>

</html>

This code snippet does NOT switch to mobile view and show the issue, just provided for completeness.

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  width: max-content;
}

body {
  margin: 0;
}

header {
  background: goldenrod;
  border-right: 1px solid red;
  position: sticky;
  left: 0;
  width: calc(100vw - 12px);
}

main {
  width: 200vw;
  height: 120vh;
  background: gray;
}
<header>Header, should stick horizontally, scroll vertically as usual
</header>
<main>

  <div>Main stuff</div>
  <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
</main>

Solution

  • I had similar issue with sticky not working properly on mobile. I had to change the viewport meta part to:

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">

    In your special case, we have to add some extra CSS code with media query. The explanation inside the comments can be read:

    <html>
    <head>
        <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">
        <style>
        * {
            box-sizing: border-box;
        }
        html {
            overflow-y: scroll;
            width: max-content;
        }
        body {
            margin: 0;
        }
        header {
            background: goldenrod;
            border-right: 1px solid red;
            position: sticky;
            left: 0;
            width: calc(100vw - 15px);
        }
        main {
            width: calc(120vw);
            height: 120vh;
            background: gray;
        }
        @media (max-width: 480px){ /* mobile breakpoint - can be whatever you wish */
            header{
                padding-right: 15px;  /* since there are 15 pixels less from the width */
                box-sizing: content-box; /* to add the padding to the entire width */
            }
        }
    </style>
    </head>

    <body>
        <header> Header
        </header>
        <main>
            <div>Main stuff</div>
            <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
        </main>
    </body>

    </html>

    In action, can be viewed here: https://www.sanci.hu/stack/79357957.edit.htm

    Indeed, in the snippet it's not relevant, but here it is:

    <html>

<head>
  <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">
  <style>
    * {
      box-sizing: border-box;
    }

    html {
      overflow-y: scroll;
      width: max-content;
    }

    body {
      margin: 0;
    }

    header {
      background: goldenrod;
      border-right: 1px solid red;
      position: sticky;
      left: 0;
      width: calc(100vw - 15px);
    }

    main {
      width: calc(120vw);
      height: 120vh;
      background: gray;
    }

    @media (max-width: 480px) { /* mobile breakpoint - can be whatever you wish */
      header {
        padding-right: 15px; /* since there are 15 pixels less from the width */
        box-sizing: content-box; /* to add the padding to the entire width */
      }
    }
  </style>
</head>

<body>
  <header> Header
  </header>
  <main>
    <div>Main stuff</div>
    <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
  </main>
</body>

</html>