CSS Scroll Snap

CSSスライダーを段落へ差し込む

CSS Scroll Snap

概要

CSS スクロールスナップ (CSS Scroll Snap) は CSS モジュールの一つで、ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる方法を提供する。

プロパティと構成

主要なプロパティは、scroll-snap-type と scroll-snap-align であり、その構成は、 プロパティは、スクロールコンテナで使用し、スクロールの種類と方向を指定する。 プロパティは子要素で使用し、スクロールがスナップする位置を設定する。

レスポンシブ
scroll-snap-align: center; を使ったタイプ

動作とデザインの検証

javascript(jquery)を使わないで、コンテンツブロックに対してマウスをドラッグしてスクロールさせる試みを模索したが、上手い解決策は見つからない。

関連リンク

マウス・ドラッグでスライダーを操作する flickity.js, Slider Pro

レスポンシブ対応のコンテナの高さを算出する方法にアスペクトレシオと vw を使う

ここまで理解してきた方法でスクロールコンテナを作ることはできた。だが、本題はこの次にある。これをページの段落に差し込むにはどうしたら良いか。

このタイプのコンテナは高さの提示が必須である。レスポンシブ対応で段落の中に差し込むとなると論理的な技が必要である。

レスポンシブ
CSS Scroll Snap 検証6 (コンテナの高さ)

アスペクト比を使う

以前、でこういうのがあった。アスペクト比はイメージのサイズを見れば分かる。またイメージを配置するときの横幅のサイズがパーセントか vw などで指定してされていれば、高さのサイズが判明する。

高さを「x」とする。スライドするこのイメージのアスペクト比は 740 : 474 である。

例えば @media (orientation: landscape) and (min-width:1024px) のときのイメージの横幅は 40% で指定しているから、「40vw : x = 740 : 474」の式が成立する。この「x」を求める。故に「x = 25.62vw 」が高さとなる。これをブレークポイント別に指定する。

↑ページトップへ