公開日: 2026 年 9 月 4 日
「単一軸スクロール コンテナ」機能では、CSS の overflow プロパティが拡張され、clip と組み合わせたスクロール可能な値（auto、scroll、hidden）がサポートされるようになりました（例: overflow: scroll clip）。これにより、1 つの軸のみのスクロール コンテナが作成されます。
この変更により、軸ごとのスティッキー ポジショニングなど、要望の多かった機能が利用できるようになりますが、他のスクロール依存機能に副作用が生じることもあります。互換性に関するリスクが考えられるため、この機能が安定版チャンネルにロールアウトされる前に、デベロッパーの皆様にウェブサイトのテストを実施してフィードバックをお寄せいただくようお願いしています。
この機能は、Chrome 153 の Beta、Dev、Canary のリリース チャンネルでデベロッパー テストに利用できます。フラグをオンにする必要はありません。
1 つの軸でオーバーフローを設定する場合の注意点
この機能がなければ、CSS で真の単一軸スクロール コンテナを作成することはできませんでした。一方の軸をスクロールするように構成し、もう一方の軸を表示したままにしようとすると（たとえば、overflow-x: scroll を設定して overflow-y: visible をそのままにする）、ブラウザのスタイル エンジンは表示されている軸を auto（または scroll）に強制的に計算します。これにより、意図していなくても 2 次元スクローラーが作成されます。
この問題は、上部の行と最初の列を固定した表を作成しようとすると、顕著になります。次の例では、最初の列が水平方向にスクロールする .table-wrapper に固定され、最上行がドキュメントのスクローラーに固定されるようにします。
<div class="table-wrapper" style="overflow-x: auto;">
<table>
…
</table>
</div>
/* Scroll horizontally */
.table-wrapper {
overflow-x: auto;
}
/* Sticky top row */
.table-wrapper thead {
position: sticky;
top: 0;
}
/* Sticky first column */
.table-wrapper td:first-child {
position: sticky;
left: 0;
}
試してみると、機能しないことがわかります。これは、前述のオーバーフローの特性によるものです。.table-wrapper は事実上 2 次元スクローラーになります。そのため、position: sticky が各軸の最も近い祖先スクローラーを検索すると、どちらの場合も .table-wrapper 要素が返されます。
ライブデモ
デモの記録
単一軸スクロール コンテナでこの問題が修正されました
単一軸スクロール コンテナでは、clip を使用して、セカンダリ軸がスクローラーになるのを明示的に防ぐことができます。これにより、position: sticky は 2 つの異なるスクロール コンテナを個別に追跡できます。
テーブルの例を修正するには、横スクロールを overflow-y: clip とペアにします。
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
または、overflow の短縮形を使用します。
.table-wrapper {
overflow: auto clip;
}
これにより、.table-wrapper は x 軸のスクロール コンテナとしてのみ機能します。これで、上部の固定行は をバイパスして、ドキュメントの y 軸スクローラーに正しく固定されるようになります。一方、最初の列は引き続き .table-wrapper に水平方向に固定されます。
サポートされているブラウザでこの投稿をご覧になっている場合は、次のデモで動作を確認できます。
ライブデモ
デモの記録
影響を受ける動作
単一軸スクロール コンテナはスクロール コンテキストの評価と作成の方法を変更するため、スクロール コンテナに依存する他の機能で次のような変更が発生する可能性があります。
position: sticky: ご覧のとおり、要素が単一軸スクロール コンテナ内に正しく固定されるようになり、1 つの軸でoverflow: clipによって制約されている要素の動作が改善されました。overscroll-behavior: 要素が 1 つの軸でのみスクロール コンテナになる可能性があるため、overscroll-behaviorがクリップされた軸でトリガーされなくなり、カスタムのプルツーリフレッシュやバウンス効果に影響する可能性があります。この動作の変更は、Firefox と Safari に合わせたものです。- プログラムによるスクロール: 単一軸のスクロール コンテナでスクロール API（
Element.scrollTo()など）を呼び出すと、プログラムによるスクロールの制約が適用されるようになりました。この要素は、クリップとして定義された軸に沿ってプログラムでスクロールすることを拒否します。 - グリッドとフレックスの最小セルサイズ: グリッド レイアウトとフレックス レイアウトのスクロール コンテナでは、通常、デフォルトの最小サイズ（
min-width: auto）は無視され、セルが利用可能なスペースに合わせて調整できるようになります。overflow: clipが同じ軸に設定されている場合、デフォルトの最小サイズが有効になり、フレキシブル コンテナまたはグリッド コンテナが大きくなる可能性があります。
特徴検出
単一軸スクロール コンテナのサポートを検出するには、single-axis-scroll-container キーワードを使用して @supports named-feature() ルールをクエリします。
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
CSSWG の問題 #13677 で説明したように、named-feature(single-axis-scroll-container) を使用することが、この機能を検出する標準的な方法として推奨されています。@supports (overflow: scroll clip) 単独でのチェックは解析チェックのみであり、ブラウザが改訂された単一軸スクロール動作を正しく処理するかどうかを検出できないためです。
JavaScript では、CSS.supports("named-feature(single-axis-scroll-container)") を使用してこのチェックを行います。
フィードバックをお寄せください
潜在的な互換性リスクを評価するため、190 のウェブサイトでテストを実施しました。この分析に基づくと、今回の変更によって重大な破損が発生することはないようです。
ただし、単一軸スクロール コンテナはスクロール コンテキストの評価方法を根本的に変更するため、より広範囲のネットがキャストされます。この機能が安定版にリリースされる前に、安定版以外の Chrome チャンネルでウェブサイトとウェブ アプリケーションをテストして、エッジケースを特定していただくようお願いしています。
動作がおかしくなったり、予期しないスクロール動作が発生したりした場合は、Chromium のバグを報告してください。