CSS の overflow: clip; について

🙋 はじめに

overflow プロパティを使用する際に scroll や hidden 等を使う機会は多いですが、clip を使用する機会がなかったので調べた内容をまとめます。

overflow: clip; とは？

MDN を読みながら理解を深めようと思います。

overflow - CSS: カスケーディングスタイルシート | MDN

overflow は CSS の一括指定プロパティで、コンテンツが要素のパディングボックスに収まらない（はみ出す）場合に、水平方向および垂直方向の望ましい動作を設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow#clip

挙動について以下のように記載がありました。

溢れたコンテンツは、overflow-clip-margin プロパティを使用して定義された要素のはみ出しクリップ辺で切り取られます。

hidden と同じような挙動です。

ただし、溢れたコンテンツをブラウザがどのように認識するかという点で hidden と clip には違いがあるようです。

切り取られた領域の外側に溢れたコンテンツは表示されず、ユーザーエージェントはスクロールバーを追加せず、プログラムによるスクロールも行われません。新しい整形コンテキストは作成されません。

hidden によって切り取られたコンテンツは scrollTo() メソッド等を使用することでスクロールすることができますが、clip によって切り取られたコンテンツは scrollTo() メソッド等を使ってもスクロールすることができないようです。

単一方向におけるクリップ

overflow-clip-margin を使用することでどれだけ外にはみ出すことができるかを指定することができます。

overflow-clip-margin - CSS: カスケーディングスタイルシート | MDN

overflow-clip-margin は CSS のプロパティで、 overflow: clip を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。 このプロパティで定義される境界は、ボックスのオーバーフロークリップ枠と呼ばれます。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-clip-margin

まとめ

overflow: clip; は、溢れたコンテンツを切り取る CSS のプロパティで hidden とは異なり、プログラムによるスクロール操作ができない。