← 動的パーツギャラリーへ戻る

パーツ番号 03-14-05 ・ CSSのみ

モバイル横スクロール・スナップパンくず

横幅に収まらない深い階層のパンくずを、スナップ付きで横スクロールできるようにしたモバイル向けUIです。WordPressのECサイトの商品詳細ページなどに向いています。

mobilescrollcss

プレビュー

ソースコード

HTML

<div class="d03-14-05-stage">
          <div class="d03-14-05-scroll">
            <a href="#" onclick="return false">ホーム</a>
            <span class="d03-14-05-sep">›</span><a href="#" onclick="return false">ショップ</a>
            <span class="d03-14-05-sep">›</span><a href="#" onclick="return false">レディース</a>
            <span class="d03-14-05-sep">›</span><a href="#" onclick="return false">アウター</a>
            <span class="d03-14-05-sep">›</span><a href="#" onclick="return false">コート</a>
            <span class="d03-14-05-sep">›</span><span class="d03-14-05-current">ロングコート</span>
          </div>
          <p class="d03-14-05-hint">← 横にスワイプできます →</p>
        </div>

CSS

.prev.d03-14-05{padding:0;display:block}
        .d03-14-05-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 0}
        .d03-14-05-scroll{
          display:flex;align-items:center;gap:8px;max-width:280px;
          overflow-x:auto;scroll-snap-type:x proximity;padding:12px 20px;
          background:#fff;border:1px solid #e2e8f0;border-radius:999px;
          -webkit-overflow-scrolling:touch;
        }
        .d03-14-05-scroll::-webkit-scrollbar{height:0}
        .d03-14-05-scroll a,.d03-14-05-current{
          scroll-snap-align:center;white-space:nowrap;text-decoration:none;
          color:#475569;font-weight:600;font-size:12.5px;flex:none;
        }
        .d03-14-05-scroll a:hover{color:#2563eb}
        .d03-14-05-current{color:#0f172a;font-weight:700}
        .d03-14-05-sep{color:#cbd5e1;flex:none}
        .d03-14-05-hint{margin:0;font-size:11px;color:#94a3b8}

クラス名 .d03-14-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。