目次
目次

スマートフォンのときタブ一覧をスクロールスナップする方法

Cocoonカスタマイズ集
この記事は約4分で読めます。
記事内に広告が含まれています。

はじめに

以下をCocoonで実現します。

コピペで簡単！スマートフォンでスクロールスナップ | POINT OF VIEW　略して、ポイビュー。
こんなSWELLユーザーに読んでほしい！ 投稿リストやリッチカラムをスマホではコンパクトに表示したい タブブロックに投稿リストを配置している CSSもよくわからないし、難しいカスタマイズはムリ・・・ 前回の記事で「無限ループアニメーション」
point-of-view.blog

フロントページタイプが「タブ一覧」の場合、ページ下部まで投稿一覧を確認した後、タブを切り替える際に、ページ上部までスクロールし直す必要があります。
特にスマートフォンでは、この操作が手間に感じられることがあります。

そこで、画面幅が480px以下の場合、投稿を横並びにスクロール表示し、タブをそのすぐ上に配置するように変更します。

さらに、カードをスワイプした際、1枚ずつ止まらずに連続で送られてしまう問題があります。
この問題を解決するため、CSSのscroll-snap-typeを用いて、スワイプ時にもカードが1枚ずつ確実に停止するようにします。

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！
www.webcreatorbox.com

この記事では、この方法について説明します。

スクロールスナップとは

スクロールスナップとは、スクロール操作時に特定の位置（スナップポイント）でスクロールがピタッと止まるようにする機能です。
上下方向のスクロールした際、カードの途中で止まることなくスナップし、カード全体が表示されるようになります。
ただし、PC表示ではこの変更の効果が目立ちにくい場合があります。

  • 通常
  • スナップ
タグ一覧から不要なタグを非表示する方法
お気に入り一覧ページを追加する方法
CocoonとXwriteの対応速度の違いから考える、開発体制の課題
エントリーカードに読書進捗バーを表示する方法
カードタイプ「タイル」をCSSだけでMasonryレイアウトにする方法
タグ一覧から不要なタグを非表示する方法
お気に入り一覧ページを追加する方法
CocoonとXwriteの対応速度の違いから考える、開発体制の課題
エントリーカードに読書進捗バーを表示する方法
カードタイプ「タイル」をCSSだけでMasonryレイアウトにする方法

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    Cocoon設定

    表1に示す項目を設定します。

    Cocoon設定
    設定大項目項目設定値
    インデックスフロントページタイプタブ一覧オン
    カードタイプスマートフォンで縦型＆タイル型のエントリーカードを1カラムにするオン
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    @media (max-width: 480px) {
  .tab-cont .ect-vertical-card {
    &.sp-entry-card-1-column {
      flex-wrap: nowrap;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;

      .a-wrap {
        flex-shrink: 0;
        scroll-snap-align: center;
      }
    }
  }
}

参考：関連記事をスクロールスナップする方法

関連記事に、スクロールスナップを使えば、スクロールをした際に、各記事の先頭へピタッと吸い付くような心地よい横スクロールが実装できます。

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下のコードをstyle.cssに追加します。

.body .related-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.body .related-entry-card-wrap {
  flex-shrink: 0;
  max-width: 100%;
  scroll-snap-align: start;
}

さいごに

今回紹介した方法を使えば、スマートフォンの操作性を大幅に向上させることができます。
タブ一覧の快適な切り替えや、スナップスクロールによる滑らかな動作を簡単に実装可能です。
これにより、ユーザーにとって使いやすく、魅力的なウェブサイトを作成できるでしょう。

タイトルとURLをコピーしました