これはなに
2022年ぐらいに、使えるようになったばかりの display: contents; を試してみたくて安易に指定したことがあります。
すると scroll-snap-type が思ったような挙動をしてくれなくなりました。
当時は実装を優先していたので、振り返りをまとめなかったのですが、原因を改めてまとめてみようと思います。
scroll-snap-type とは
MDNによると下記の説明があります。
scroll-snap-typeはCSSのプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。
デモ
まずはデモをご覧ください。
See the Pen Untitled by gilly135 (@gilly135) on CodePen.
やりたかったこと
scroll-snap-type を使って、横軸方向にスナップし、特定の位置にスナップが止まるようなUIをコーディングしようとしました。
UIはデモ01を参照してください。
なので、デモの .scrollContents に下記の記述をしました。
.scrollContents {
scroll-snap-type: x mandatory;
}
やらかしたこと
実際にCSSスクロールスナップをしたかったUIは画像だったのですが、このときにデモの.card に display: contents; を指定しました。
冒頭にも述べましたが、当時使えるようになったばかりの display: contents; を試してみたくて、実験で使ってみた記憶があります。
すると scroll-snap-type が思ったような挙動をしてくれなくなりました。
display: contens; とは
MDNによると下記の説明があります。
これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。
ChromeのDevtoolのUIを借りて説明すると、 display: contents; は青い要素の部分だけになります。
margin、 border、 paddingがなくなります。
あと background-color もなくなります。
なので、.card の中身の数字だけが表示される要素となってしまいます。
考察
CSSスクロールスナップでは、 scroll-padding や scroll-margin などのプロパティも存在します。
このことから、コンテンツのボックスが存在しなければ利用できないと考えられます。
display: contents; を指定したことで、コンテンツのボックスが存在しなくなったため、CSSスクロールスナップが機能しなくなったのだと思われます。
まとめ
-
display: contents;はコンテンツのボックスを生成しない - CSSスクロールスナップするためには、コンテンツのボックスが必要
この記事が誰かのお役に立てると幸いです。