CSS Scroll Snap

概要

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

プロパティと構成

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

動作とデザインの検証

• (1).基本動作とデザインを確認する
  「CSS Scroll Snap Module」 を利用すると、スワイプしたりマウスドラッグしたら、特定のポイントに自動的にスナップできる。
• (2).スクロールバーを非表示にする スクロールバーの非表示と flex の使い方
• (3). 「overflow-x: hedden」の場合、スワイプが効かなくなる。
• (4).スクロールをスムースにする
  CSS Object Model (CSSOM) のscroll-behaviorプロパティでできることは、「スムーススクロールがCSSでできる」。ページ内リンクの移動がアニメーションで移動することが可能。
• (5).レスポンシブに幅が広ければスライド数が増えるタイプで scroll-snap-align: center; を使ったもの。
• (6).デスクトップPC向けマウスの操作に対応するために作ったスライド。左上のアイコンをクリックすればスライドする。

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

関連リンク

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

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

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

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

アスペクト比を使う

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

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

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

↑ページトップへ

  /* scrollbar 非表示 */

  .swipe-content::-webkit-scrollbar {
    /* Chrome,Safari */
    display: none;
  }

  .swipe-content {
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style;
    none;
    /* IE,Esge */
  }
  /* //scrollbar 非表示 */