55072

[code]

    <header>ヘッダー</header>
    <main>
        縦横に長いコンテンツ
    </main>
    <footer>フッター</footer>
    
[/code]

縦スクロール時には、全ての要素がスクロールに追従して表示位置が変わる（通常の動作）。  
横スクロール時には、`main` 部分はスクロールに追従して表示位置が変わるが、「ヘッダー」と「フッター」の横位置は固定（スクロールしない）。  
このようなレイアウトは可能でしょうか？

`main` に `overflow-x: auto`、または `overflow-x: scroll`
を設定することで希望に近いことは実現できるのですが、横スクロールバーが `main`
要素の下に表示されるので、横スクロールするためにはいったん縦スクロールする必要があるため不便です。スクロールバーはあくまでページのスクロールバーを使いたいです。


CC BY-SA 4.0
2019-05-18T09:55:57.507
55071
2019-05-18T10:55:19.303
3925
question
html css html5
横スクロールに対してのみ position: fixed な要素


`position: sticky` を使用することで、質問者さんの実現したいことが行なえると思います。

粘着指定を用いるにあたって、スティッキーコンテナの幅を `main` 要素と合わせるため、 `.container` の付与された要素の `width`
プロパティに `max-content` を指定しています。

[code]

    const box = document.createElement("div");
    box.style.position = "absolute";
    box.style.height = "1px";
    box.style.width = "calc(100vw - 100%)";
    document.body.appendChild(box);
    document.body.style.setProperty(
      "--scrollbar-size",
      window.getComputedStyle(box, null).getPropertyValue("width")
    );
    document.body.removeChild(box);
[/code]

[code]

    body {
      margin: 0;
      --scrollbar-size: 0;
    }
    
    .container {
      width: max-content;
      display: flex;
      flex-direction: column;
    }
    
    header,
    footer {
      width: calc(100vw - var(--scrollbar-size));
      height: 150px;
      position: sticky;
      left: 0;
    }
    
    header {
      background: #faf;
    }
    
    main {
      width: 500vw;
      height: 250vh;
      background: #faa;
    }
    
    footer {
      background: #ffa;
    }
[/code]

[code]

    <div class="container">
      <header class="sticky">ヘッダー</header>
      <main>
        縦横に長いコンテンツ
      </main>
      <footer class="sticky">フッター</footer>
    </div>
[/code]


CC BY-SA 4.0
2019-05-18T10:55:19.303
55072
2019-05-18T10:55:19.303
32986
55071
answer