スクロールスパイ Scrollspy

スクロール位置に基づいて Bootstrap のナビゲーションやリストグループコンポーネントを自動的に更新し、ビューポート内でどのリンクが現在アクティブであるかを示します。

On this page

動作の仕組み

Scrollspy は、アンカーの href によって参照される id を持つ要素がスクロールしてビューに入ったときに、アンカー(<a>)要素の .active クラスを切り替えます。Scrollspy は Bootstrap の nav コンポーネントまたはリストグループと組み合わせて使用するのが最適ですが、現在のページ内の任意のアンカー要素でも機能します。以下は動作の仕組みです。

始めるには、scrollspy には2つのものが必要です:ナビゲーション、リストグループ、または単純なリンクのセットと、スクロール可能なコンテナです。スクロール可能なコンテナは <body> か、設定された height と overflow-y: scroll を持つカスタム要素です。
スクロール可能なコンテナに、data-bs-spy="scroll" と data-bs-target="#navId" を追加します。ここで navId は関連するナビゲーションの一意の id です。要素内にフォーカス可能な要素がない場合は、キーボードアクセスを確保するために tabindex="0" も含めるようにしてください。
「監視対象」のコンテナをスクロールすると、関連するナビゲーション内のアンカーリンクから .active クラスが追加および削除されます。リンクには解決可能な id ターゲットが必要です。そうでない場合は無視されます。例えば、<a href="#home">home</a> は DOM 内の <div id="home"></div> のようなものに対応している必要があります。
表示されていないターゲット要素は無視されます。以下の非表示要素セクションを参照してください。

例

navbar の下のエリアをスクロールして、アクティブクラスの変更を確認してください。ドロップダウンメニューを開くと、ドロップダウンアイテムも強調表示されます。

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

Third heading

Fourth heading

Fifth heading

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

ネストされた nav

Scrollspy はネストされた .nav でも動作します。ネストされた .nav が .active の場合、その親も .active になります。navbar の横のエリアをスクロールして、アクティブクラスの変更を確認してください。