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

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

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

1 件の回答 1

3

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

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

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);
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;
}
<div class="container">
  <header class="sticky">ヘッダー</header>
  <main>
    縦横に長いコンテンツ
  </main>
  <footer class="sticky">フッター</footer>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。