Header水平粘性布局桌面正常、移动端失效问题求助

核心需求 #

• header可像常规元素一样垂直滚动出页面
• 使用HTML滚动条（始终显示在视口底部）时，header保持水平粘性
• 适配内容宽度超过视口的场景：header始终横向可见，但允许垂直滚动出屏幕以节省空间

现存问题 #

桌面端横向滚动时，金色header能保持位置并填满整个宽度；但切换到移动端后功能失效，横向滚动时header右侧会出现空白间隙，无法保持水平粘性。

桌面端正常表现：金色header横向铺满视口，横向滚动时保持左侧粘性
移动端异常表现：横向滚动时header右侧出现空白，无法铺满当前视口宽度

测试代码 #

以下代码无法在线切换到移动端视图，如需复现问题，请复制到本地HTML文件中测试：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 移动端缩放设置 -->
<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>

补充测试代码 #

CSS部分

* {
  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;
}

HTML部分

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

内容的提问来源于stack exchange，提问作者run_the_race