スクロールスパイ

Scrollspy

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

項目

基礎知識

スクロールスパイは、アンカー(<a>)要素の.activeクラスを、アンカーのhrefが参照するidの要素がスクロール表示された時に切り替えます。スクロールスパイはBootstrapのナビゲーションコンポーネントまたはリストグループと組み合わせて使うのがベストですが、現在のページ内のどのアンカー要素でも動作します。

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

例

ナビゲーションバー

ナビゲーションバーの下のエリアをスクロールして、アクティブなクラスの変化を見てください。ドロップダウン項目も同様にハイライトされます。

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でも動作します。ネストされた.navが.activeの場合、その親も.activeになります。ナビゲーションバーの隣の領域をスクロールして、アクティブなクラスの変化は下記を参考にしてください。