マウスホイールでカード型の要素を切り替える

やりたいこと・前提

• カード型の要素が水平方向に並んでいる
• マウスホイールでカード型の要素の表示を横スクロールさせる
• シンプルに実装(html,css,jsのみで)

カード型要素のUI

カード型の要素が横に並んでいるつくりはよく見かけます。
基本的に矢印ボタンを押して左右に切り替えることが多いですが、
（実際そういう画面を作る機会も多い）
今回はマウスホイールの操作だけで完結させたかったので作ってみました。

Apple Store

Google Store

最近は個人的にSvelteKitを使って色々作ることが多いので
できるだけシンプルな作りを目指しています。

実装

実装のポイントとしてはWheelイベントで横スクロールに変換している箇所です。
Wheelイベントの垂直方向の移動量deltaYをscrollByのleft
（水平方向のスクロール量）に設定しています。

const container = document.getElementById('cardContainer');

container.addEventListener('wheel', function (e) {
  // Ctrlキーを押しながらの操作や横ホイールは無視
  if (e.ctrlKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;

  e.preventDefault(); // 縦スクロールは無効
  container.scrollBy({
    left: e.deltaY,
    behavior: 'smooth'
  });
}, { passive: false });

ソースコード全体は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>横スクロールカード</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: #f0f0f0;
      overflow-x: hidden;
    }

    .card-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 2rem;
      gap: 1rem;
      scrollbar-width: none;

      max-width: 300px;
      border: 0.2rem solid;
      margin: 1.5rem;
    }

    .card-container::-webkit-scrollbar {
      display: none;
    }

    .card {
      flex: 0 0 80%;
      max-width: 80%;
      background: white;
      border-radius: 1rem;
      border: 0.2rem solid;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 2rem;
      scroll-snap-align: center;
      transition: transform 0.3s;
    }

    .card:hover {
      transform: scale(1.02);
    }

    h2 {
      margin-top: 0;
    }
  </style>
</head>
<body>

  <div class="card-container" id="cardContainer">
    <div class="card"><h2>カード1</h2><p>コンテンツA</p></div>
    <div class="card"><h2>カード2</h2><p>コンテンツB</p></div>
    <div class="card"><h2>カード3</h2><p>コンテンツC</p></div>
    <div class="card"><h2>カード4</h2><p>コンテンツD</p></div>
  </div>
  
  <script>
    const container = document.getElementById('cardContainer');

    container.addEventListener('wheel', function (e) {
      // Ctrlキーを押しながらの操作や横ホイールは無視
      if (e.ctrlKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;

      e.preventDefault(); // 縦スクロールは無効
      container.scrollBy({
        left: e.deltaY,
        behavior: 'smooth'
      });
    }, { passive: false });
  </script>

</body>
</html>

完成

gifだとマウスホイールの操作が分かりにくいですがこんな感じで
横に並んだカード型の要素が横スクロールで切り替わります。

所感

スマホだとスワイプでそのままスクロールするのであまり意識しませんが
PCでブラウジングしていてホイールで横にスクロールしてくれないかなと
思うことが多々あり実際に試してみました。

割とシンプルにできたので良かったです。
自動スクロールや矢印のナビゲーションボタンも簡単に
追加できそうなのでいろいろ試してみます。