css Question posted in
Some basic documentation can be found here.

CSS: stick an element horizontally only works on desktop, not mobile

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 view port, 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>
Tags:

2

Answers


  1. 0

    You are using different widths for the header and the main element within the scrollable area.To make the position: sticky; property work on mobile devices, the <meta name="viewport" content="minimum-scale=1"> value needs to be added (CSS Sticky position not working properly on mobile). This might be a solution, but I don’t think it’s the right approach for responsive design. Instead, the overflow-x property can be applied to the main element.This way, no matter how long the content of the main element is, the header element will always remain fixed on the x-axis.

    * {
    box-sizing: border-box;
    margin: 0;
  }
  html {
    overflow-y: hidden;
    overflow-x: hidden;
  }
  body {
    overflow-x: auto;
    height: 100%;
  }
  header {
    background: goldenrod;
    border-right: 1px solid red;
    position: sticky;
    left: 0;
    width: 100%;
  }
  main {
    overflow: auto;
    width: fit-content;
    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, loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
</main>
    Login or Signup to reply.
  2. 0

    The problem is the scrollbar, on mobile devices the scroll bar does not take any space on the right side of the screen.

    To do that you have to use javascript, this is an example (I also used jQuery):

    $(document).ready(function () {
    function getScrollBarWidth() {
        let el = document.createElement("div");
        el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
        document.body.appendChild(el);
        let width = el.offsetWidth - el.clientWidth;
        el.remove();
        return width;
    }

    let siteHeader = $("#siteHeader");
    $(siteHeader).css("width", "calc(100vw - " + getScrollBarWidth() + "px)");
});
    * {
    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;
}
#siteHeader {
    width: 100vw;
}

main {
    width: 200vw;
    height: 120vh;
    background: gray;
}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<header id="siteHeader">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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search