CSS スクロールスナップ (CSS Scroll Snap) は CSS モジュールの一つで、ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる方法を提供する。
主要なプロパティは、scroll-snap-type と scroll-snap-align であり、その構成は、 プロパティは、スクロールコンテナで使用し、スクロールの種類と方向を指定する。 プロパティは子要素で使用し、スクロールがスナップする位置を設定する。
javascript(jquery)を使わないで、コンテンツブロックに対してマウスをドラッグしてスクロールさせる試みを模索したが、上手い解決策は見つからない。
マウス・ドラッグでスライダーを操作する flickity.js, Slider Pro
ここまで理解してきた方法でスクロールコンテナを作ることはできた。だが、本題はこの次にある。これをページの段落に差し込むにはどうしたら良いか。
このタイプのコンテナは高さの提示が必須である。レスポンシブ対応で段落の中に差し込むとなると論理的な技が必要である。
以前、でこういうのがあった。アスペクト比はイメージのサイズを見れば分かる。またイメージを配置するときの横幅のサイズがパーセントか vw などで指定してされていれば、高さのサイズが判明する。
高さを「x」とする。スライドするこのイメージのアスペクト比は 740 : 474 である。
例えば @media (orientation: landscape) and (min-width:1024px) のときのイメージの横幅は 40% で指定しているから、「40vw : x = 740 : 474」の式が成立する。この「x」を求める。故に「x = 25.62vw 」が高さとなる。これをブレークポイント別に指定する。