Googleは9月4日、「Chrome for Developers Blog」で、CSSの新機能「単一軸スクロールコンテナ」のデベロッパーテスト開始を発表した。対象はChrome 153のBeta、Dev、Canaryチャンネルで、フラグ等の設定なしに利用が可能だ。
今回の新機能は、CSSのoverflowプロパティを拡張し、「scroll」「auto」「hidden」と「clip」を組み合わせて指定できる。例として「overflow: scroll clip」のように設定することで、特定の軸（X軸またはY軸）のみにスクロールを限定し、もう一方の軸はclipでカットされる。これまで、1軸のみをスクロールコンテナとすることは困難だったが、この機能により明確に制御できるようになった。
例えば、表の上部行や先頭列のみを固定する場合、従来は2次元スクローラーになりsticky指定が正しく機能しなかった。しかし「overflow-x: auto; overflow-y: clip;」や「overflow: auto clip;」といった新しい書き方を用いることで、意図通りの固定を実現できる。sticky要素の固定やoverscroll-behavior、プログラム的なスクロール操作など、他のスクロール関連機能にも挙動の変化があるため、既存コンテンツへの影響には注意が必要だ。
互換性リスクを調査した結果、深刻な破損は確認されなかったが、単一軸スクロールコンテナはスクロールコンテキストの評価方法を根本的に変更する。Chrome安定版リリース前に、開発者による十分なテストとフィードバックが求められている。なお、サポートの有無はCSSの@supports named-feature(single-axis-scroll-container)で判定できる。
- 関連リンク
この記事は参考になりましたか？
- この記事の著者
-
CodeZine編集部（コードジンヘンシュウブ）
CodeZineは、株式会社翔泳社が運営する開発者のための情報メディアです。日々の開発に取り組むエンジニアやテクノロジーを学びたい方に向けて、プログラミングやAI活用、開発ツール、エンジニアの学びとキャリアに関する記事をお届けしています。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
