縦スクロールに連動して切り替わるタブを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

縦スクロールに連動して切り替わるタブを作る方法

ページ内に複数のコンテンツが縦方向に並んでいる場合、現在どの内容を見ているのかをタブで分かりやすく示したいことがあります。縦スクロールに連動するタブを使えば、ページを上下にスクロールしたときに表示位置を判定し、「概要」「特徴」「使い方」など、現在表示しているコンテンツに対応するタブを自動で強調表示できます。

このサンプルでは、HTMLで6つのタブと対応するコンテンツを縦方向に配置し、CSSのposition:stickyを使ってタブを画面上部に固定します。JavaScriptではIntersection Observerを使って縦スクロールによって表示位置に入ったコンテンツを検知し、対応するタブの選択状態を自動で切り替えます。また、タブをクリックすると対応するコンテンツまでスムーズに縦スクロールできるため、スクロール操作とタブ操作のどちらからでも目的の内容へ移動できます。

長いページの目次や商品・サービスの説明、機能紹介、マニュアルなど、複数のコンテンツを上から順番に掲載するページで利用できます。タブ名やコンテンツはHTMLから変更でき、CSSではタブの色・サイズ・余白やコンテンツ部分のデザインなどを調整できます。画面幅が狭い場合は6つのタブを3列2段に並べるレスポンシブ対応も行っています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

縦スクロールに連動するタブ

スクロールすると、表示位置に合わせて対応するタブが自動で切り替わります。

概要

スクロール位置を検知し、現在表示しているコンテンツに対応するタブを自動で強調表示します。ページを下へスクロールして、タブの表示が変化することを確認できます。

特徴

タブ部分は画面上部に固定されるため、コンテンツをスクロールしても現在位置を確認できます。表示するセクションが変わると、対応するタブも自動で切り替わります。

使い方

タブをクリックすると、対応するコンテンツまでスムーズにスクロールします。長いページの目次や機能紹介などにも利用できます。

サンプル

サンプルやコード例など、実際の内容を紹介するコンテンツを配置できます。スクロールすると対応する「サンプル」タブが自動で選択されます。

応用

カスタマイズ方法や応用例などを掲載できます。コンテンツが長いページでも現在表示している位置をタブから確認できます。

まとめ

最後のコンテンツまでスクロールすると、「まとめ」タブが自動で選択されます。タブをクリックして前のコンテンツへ戻ることもできます。

ページをスクロールすると現在位置に対応するタブが自動で切り替わり、タブをクリックすると対応するコンテンツへ移動します。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>スクロールに連動して切り替わるタブ</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- スクロール連動タブ全体 -->
  <div class="scroll-linked-tabs_wrap">

    <!-- タイトル -->
    <div class="scroll-linked-tabs_title">
      スクロールに連動するタブ
    </div>

    <!-- 説明文 -->
    <p class="scroll-linked-tabs_text">
      スクロールすると、表示位置に合わせて対応するタブが自動で切り替わります。
    </p>

    <!-- タブ一覧 -->
    <div class="scroll-linked-tabs_tabs" aria-label="コンテンツ一覧">

      <!-- 概要タブ -->
      <button
        class="scroll-linked-tabs_tab is-active"
        type="button"
        data-target="scroll-linked-tabs-overview">
        概要
      </button>

      <!-- 特徴タブ -->
      <button
        class="scroll-linked-tabs_tab"
        type="button"
        data-target="scroll-linked-tabs-feature">
        特徴
      </button>

      <!-- 使い方タブ -->
      <button
        class="scroll-linked-tabs_tab"
        type="button"
        data-target="scroll-linked-tabs-usage">
        使い方
      </button>

      <!-- サンプルタブ -->
      <button
        class="scroll-linked-tabs_tab"
        type="button"
        data-target="scroll-linked-tabs-sample">
        サンプル
      </button>

      <!-- 応用タブ -->
      <button
        class="scroll-linked-tabs_tab"
        type="button"
        data-target="scroll-linked-tabs-custom">
        応用
      </button>

      <!-- まとめタブ -->
      <button
        class="scroll-linked-tabs_tab"
        type="button"
        data-target="scroll-linked-tabs-summary">
        まとめ
      </button>

    </div>

    <!-- 概要コンテンツ -->
    <div
      class="scroll-linked-tabs_panel"
      id="scroll-linked-tabs-overview">

      <div class="scroll-linked-tabs_panel-title">
        概要
      </div>

      <p class="scroll-linked-tabs_panel-text">
        スクロール位置を検知し、現在表示しているコンテンツに対応するタブを自動で強調表示します。
        ページを下へスクロールして、タブの表示が変化することを確認できます。
      </p>

    </div>

    <!-- 特徴コンテンツ -->
    <div
      class="scroll-linked-tabs_panel"
      id="scroll-linked-tabs-feature">

      <div class="scroll-linked-tabs_panel-title">
        特徴
      </div>

      <p class="scroll-linked-tabs_panel-text">
        タブ部分は画面上部に固定されるため、コンテンツをスクロールしても現在位置を確認できます。
        表示するセクションが変わると、対応するタブも自動で切り替わります。
      </p>

    </div>

    <!-- 使い方コンテンツ -->
    <div
      class="scroll-linked-tabs_panel"
      id="scroll-linked-tabs-usage">

      <div class="scroll-linked-tabs_panel-title">
        使い方
      </div>

      <p class="scroll-linked-tabs_panel-text">
        タブをクリックすると、対応するコンテンツまでスムーズにスクロールします。
        長いページの目次や機能紹介などにも利用できます。
      </p>

    </div>

    <!-- サンプルコンテンツ -->
    <div
      class="scroll-linked-tabs_panel"
      id="scroll-linked-tabs-sample">

      <div class="scroll-linked-tabs_panel-title">
        サンプル
      </div>

      <p class="scroll-linked-tabs_panel-text">
        サンプルやコード例など、実際の内容を紹介するコンテンツを配置できます。
        スクロールすると対応する「サンプル」タブが自動で選択されます。
      </p>

    </div>

    <!-- 応用コンテンツ -->
    <div
      class="scroll-linked-tabs_panel"
      id="scroll-linked-tabs-custom">

      <div class="scroll-linked-tabs_panel-title">
        応用
      </div>

      <p class="scroll-linked-tabs_panel-text">
        カスタマイズ方法や応用例などを掲載できます。
        コンテンツが長いページでも現在表示している位置をタブから確認できます。
      </p>

    </div>

    <!-- まとめコンテンツ -->
    <div
      class="scroll-linked-tabs_panel"
      id="scroll-linked-tabs-summary">

      <div class="scroll-linked-tabs_panel-title">
        まとめ
      </div>

      <p class="scroll-linked-tabs_panel-text">
        最後のコンテンツまでスクロールすると、「まとめ」タブが自動で選択されます。
        タブをクリックして前のコンテンツへ戻ることもできます。
      </p>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* スクロール連動タブ全体と子要素 */
.scroll-linked-tabs_wrap,
.scroll-linked-tabs_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* スクロール連動タブ全体 */
.scroll-linked-tabs_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  color:#111827; /* 全体の基本文字色 */
  font-family:sans-serif; /* 全体で使用するフォント */
}

/* タイトル */
.scroll-linked-tabs_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.scroll-linked-tabs_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとタブとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ一覧 */
.scroll-linked-tabs_tabs{
  position:sticky; /* スクロール時にタブを画面内へ固定 */
  top:10px; /* 画面上端から10pxの位置で固定。値を大きくすると固定位置が下がる */
  z-index:10; /* コンテンツより前面に表示 */
  display:flex; /* 6個のタブを横並びにする */
  padding-top:8px; /* タブ上側の余白。値を大きくすると固定部分の余白が広がる */
  border-bottom:1px solid #d1d5db; /* タブ下側の境界線 */
  background:#f8fafc; /* 固定時に背後の内容が透けないよう背景色を設定 */
}

/* タブ */
.scroll-linked-tabs_tab{
  flex:1; /* 6個のタブを同じ横幅にする */
  min-height:52px; /* タブの最小高さ。値を大きくするとタブが高くなる */
  padding:14px 8px; /* 上下14px・左右8px。値を大きくするとタブ内の余白が広がる */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* タブ下側の枠線を非表示 */
  border-radius:12px 12px 0 0; /* 上側の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* 親要素と同じフォントを使用 */
  font-size:14px; /* タブの文字サイズ */
  font-weight:700; /* タブ文字を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  transition:
    background-color .3s ease,
    color .3s ease;
  /*
    0.3秒で背景色と文字色を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* 2個目以降のタブ */
.scroll-linked-tabs_tab + .scroll-linked-tabs_tab{
  margin-left:4px; /* タブ同士の間隔。値を大きくすると間隔が広がる */
}

/* 現在位置に対応するタブ */
.scroll-linked-tabs_tab.is-active{
  background:#0b6bff; /* アクティブ時の背景色 */
  color:#ffffff; /* アクティブ時の文字色 */
}

/* キーボード操作でタブへフォーカスしたとき */
.scroll-linked-tabs_tab:focus-visible{
  position:relative; /* アウトラインを前面に表示するための基準 */
  z-index:1; /* 隣接するタブより前面に表示 */
  outline:3px solid rgba(11,107,255,.22); /* フォーカス時の外枠。3pxを大きくすると太くなる */
  outline-offset:2px; /* 外枠との間隔。値を大きくするとタブから離れる */
}

/* 各コンテンツ */
.scroll-linked-tabs_panel{
  min-height:320px; /* コンテンツの最小高さ。値を大きくするとスクロール区間が長くなる */
  padding:24px; /* 内側の余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #d1d5db; /* コンテンツを囲む枠線 */
  border-top:none; /* 最初のコンテンツとタブの境界線が重ならないよう上側を非表示 */
  background:#ffffff; /* コンテンツの背景色 */
  color:#4b5563; /* コンテンツの文字色 */
  font-size:16px; /* コンテンツの文字サイズ */
  line-height:1.8; /* コンテンツの行間 */
  scroll-margin-top:80px; /* タブクリック時の停止位置。値を大きくすると上側の余白が広がる */
}

/* 2個目以降のコンテンツ */
.scroll-linked-tabs_panel + .scroll-linked-tabs_panel{
  margin-top:24px; /* コンテンツ同士の間隔。値を大きくすると間隔が広がる */
  border-top:1px solid #d1d5db; /* 2個目以降は上側にも枠線を表示 */
}

/* コンテンツタイトル */
.scroll-linked-tabs_panel-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:20px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* コンテンツ本文 */
.scroll-linked-tabs_panel-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スクロール連動タブ全体 */
  .scroll-linked-tabs_wrap{
    padding:24px 18px; /* スマートフォンでは内側の余白を小さくする */
  }

  /* タブ一覧 */
  .scroll-linked-tabs_tabs{
    top:6px; /* スマートフォンでの固定位置。値を大きくすると固定位置が下がる */
    flex-wrap:wrap; /* 6個のタブを複数行へ折り返す */
    gap:4px; /* タブ同士の間隔。値を大きくすると間隔が広がる */
    padding:8px 0; /* 上下8pxの余白 */
    border-bottom:none; /* 折り返し時は下側の境界線を非表示 */
  }

  /* タブ */
  .scroll-linked-tabs_tab{
    flex:1 1 calc(33.333% - 4px); /* 1行に3個配置して6個を2段にする */
    min-height:44px; /* スマートフォンでのタブの最小高さ */
    padding:10px 6px; /* 上下10px・左右6pxの内側余白 */
    border:1px solid #d1d5db; /* 折り返した各タブを枠線で囲む */
    border-radius:8px; /* スマートフォンでの角丸 */
    font-size:13px; /* スマートフォンでの文字サイズ */
  }

  /* 2個目以降のタブ */
  .scroll-linked-tabs_tab + .scroll-linked-tabs_tab{
    margin-left:0; /* gapを使用するため横方向の個別余白を解除 */
  }

  /* 各コンテンツ */
  .scroll-linked-tabs_panel{
    min-height:280px; /* スマートフォンでのコンテンツ最小高さ */
    padding:20px 16px; /* 上下20px・左右16pxの内側余白 */
    border-top:1px solid #d1d5db; /* スマートフォンでは上側にも枠線を表示 */
    scroll-margin-top:120px; /* 2段の固定タブを考慮したスクロール停止位置 */
  }

}

// スクロール連動タブ全体を取得
const scrollLinkedTabsWrap =
  document.querySelector(".scroll-linked-tabs_wrap");

// タブをすべて取得
const scrollLinkedTabs =
  scrollLinkedTabsWrap.querySelectorAll(
    ".scroll-linked-tabs_tab"
  );

// 対応するコンテンツをすべて取得
const scrollLinkedTabsPanels =
  scrollLinkedTabsWrap.querySelectorAll(
    ".scroll-linked-tabs_panel"
  );

// 各タブへクリック処理を設定
scrollLinkedTabs.forEach(function(tab){

  tab.addEventListener("click",function(){

    // data-targetから移動先のコンテンツを取得
    const target =
      document.getElementById(tab.dataset.target);

    // 移動先が存在しない場合は処理を終了
    if(!target){
      return;
    }

    // 対応するコンテンツまで滑らかにスクロール
    target.scrollIntoView({
      behavior:"smooth",
      block:"start"
    });

  });

});

// スクロール位置を監視
const scrollLinkedTabsObserver =
  new IntersectionObserver(function(entries){

    // 監視対象ごとに表示状態を確認
    entries.forEach(function(entry){

      // 判定位置に入っていない場合は処理しない
      if(!entry.isIntersecting){
        return;
      }

      // 現在位置に対応するタブだけをアクティブにする
      scrollLinkedTabs.forEach(function(tab){

        tab.classList.toggle(
          "is-active",
          tab.dataset.target === entry.target.id
        );

      });

    });

  },{
    root:null, // ブラウザの表示領域を基準に監視
    rootMargin:"-30% 0px -60% 0px", // 上30%・下60%を除いた位置で判定
    threshold:0 // 判定領域へ入った時点で切り替える
  });

// 6個のコンテンツを監視対象へ登録
scrollLinkedTabsPanels.forEach(function(panel){

  scrollLinkedTabsObserver.observe(panel);

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは6つのタブと、それぞれに対応する「概要」「特徴」「使い方」「サンプル」「応用」「まとめ」のコンテンツを作成します。CSSではタブのデザインや画面上部への固定、各コンテンツの表示、スマートフォン向けのレイアウトを設定します。JavaScriptではスクロール位置を監視し、現在表示しているコンテンツに対応するタブを自動でアクティブにします。

sample/
    ├── index.html
    ├── style.css
    └── script.js

各ファイルの役割
index.htmlはスクロール連動タブ全体を構成するファイルです。6つのタブと、それぞれのタブに対応するコンテンツを記述しています。各タブのdata-targetと各コンテンツのidを対応させることで、クリックしたタブから移動するコンテンツと、スクロール時に強調表示するタブを関連付けています。

style.cssはタブとコンテンツのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、タブのサイズ、アクティブ時の色などを設定しています。position:sticky;によってタブ一覧をスクロール中も画面内へ固定し、scroll-margin-topによってタブをクリックしたときのコンテンツの停止位置を調整しています。

script.jsはタブのクリックとスクロール位置に応じた切り替えを行うファイルです。タブをクリックするとscrollIntoView()で対応するコンテンツまでスムーズにスクロールします。また、Intersection Observerで各コンテンツを監視し、判定位置に入ったコンテンツと対応するタブへis-activeクラスを付けます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、追加のライブラリや外部サービスを用意する必要はありません。

ページを下へスクロールすると、現在の判定位置に入ったコンテンツに対応して「概要」「特徴」「使い方」「サンプル」「応用」「まとめ」のタブが順番に強調表示されます。タブ一覧はスクロール中も画面内へ固定されます。また、任意のタブをクリックすると、そのタブに対応するコンテンツまでスムーズにスクロールできます。

カスタマイズできる内容
index.htmlでは、全体のタイトルや説明文、6つのタブ名、各コンテンツのタイトルと本文を変更できます。タブとコンテンツの対応関係を変更する場合は、タブのdata-targetと移動先コンテンツのidを同じ値に合わせてください。

style.cssでは、全体の最大横幅や余白、背景色、枠線、角丸、タブの高さ、文字サイズ、通常時とアクティブ時の色、コンテンツの高さなどを変更できます。タブの固定位置やクリック後のスクロール停止位置も数値から調整できます。script.jsではIntersection ObserverのrootMarginを変更することで、スクロール中にタブを切り替える判定位置を調整できます。

数値調整
style.css

max-width:700px;
タブ全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
タブ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
タブ全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がり、小さくすると狭くなります。

border-radius:18px;
タブ全体を囲む枠の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
全体タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。

top:10px;
PC表示でタブ一覧を固定する位置です。画面上端から10pxの位置で固定され、値を大きくすると固定位置が下がります。

padding-top:8px;
固定されるタブ一覧の上側余白です。値を大きくするとタブ上部の余白が広がります。

min-height:52px;
PC表示でのタブの最小高さです。値を大きくするとタブが高くなります。

padding:14px 8px;
PC表示でのタブの内側余白です。14pxは上下、8pxは左右の余白を表します。値を大きくするとタブ内部の余白が広がります。

border-radius:12px 12px 0 0;
PC表示でのタブ上部の角丸です。12pxを大きくすると上側の丸みが強くなります。

font-size:14px;
PC表示でのタブの文字サイズです。値を大きくすると文字が大きくなります。

margin-left:4px;
PC表示で隣り合うタブ同士の間隔です。値を大きくするとタブの間隔が広がります。

.3s
タブの背景色と文字色が変化する時間です。0.3秒で切り替わり、値を大きくするとゆっくり、小さくすると速く変化します。

min-height:320px;
PC表示での各コンテンツの最小高さです。値を大きくすると1つのコンテンツが占める縦方向の範囲が広がり、スクロールする距離も長くなります。

padding:24px;
各コンテンツの内側余白です。値を大きくすると本文と枠線との間隔が広がります。

scroll-margin-top:80px;
PC表示でタブをクリックしてコンテンツへ移動するときの上側の余白です。値を大きくすると、スクロール後にコンテンツが画面上端から離れた位置で停止します。

margin-top:24px;
2個目以降のコンテンツに設定する上側の余白です。値を大きくするとコンテンツ同士の間隔が広がります。

font-size:20px;
各コンテンツタイトルの文字サイズです。値を大きくするとタイトルが大きくなります。

script.js

rootMargin:"-30% 0px -60% 0px"
Intersection Observerがコンテンツを検知する範囲を調整する値です。上側30％と下側60％を監視範囲から除き、残った画面内の範囲へコンテンツが入ったときに対応するタブをアクティブにします。上下の割合を変更すると、スクロール中にタブが切り替わる判定位置を変更できます。

threshold:0
コンテンツが判定領域へ入った時点で検知する設定です。0では監視対象が判定領域へ入り始めたタイミングでIntersection Observerの条件を満たします。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体の横幅が縮小されます。画面幅640px以下ではpadding:24px 18px;へ変更し、全体の左右余白を小さくします。

640px以下ではタブ一覧へflex-wrap:wrap;を設定し、各タブをcalc(33.333% - 4px)を基準とした幅にすることで、6つのタブを3列2段に配置します。タブの最小高さは44px、文字サイズは13pxへ変更し、スマートフォンでも操作しやすい大きさに調整しています。

各コンテンツも640px以下ではmin-height:280px、padding:20px 16pxへ変更します。固定タブが2段になることを考慮してscroll-margin-top:120pxへ変更しているため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。