Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Scrollspy (スクロールスパイ)

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

On this page

How it works

Scrollspy を正常に機能させるために、いくつかの要件があります。

  • nav component or list group 上で使用する必要があります。
  • Scrollspy は、対象の要素、通常は <body> の position: relative; を必要とします。
  • <body> 以外の要素を監視する場合は、height を設定し、overflow-y: scroll; を適用してください。
  • アンカー (<a>) は必須であり、その id を持つ要素を指す必要があります。

正常に実装されると、ナビやリストグループはそれに応じて更新され、.active クラスは関連するターゲットに基づいて 1 つの項目から次の項目へと移動します。

Scrollable containers and keyboard access

スクロール可能なコンテナ（ <body>以外）を作成する場合は、必ず heightを設定し、tabindex = "0"と一緒にoverflow-y：scroll;を適用してください。キーボードアクセスを確保するため。

Example in 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

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.

Thidd 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.

Fourth 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.

Fifth 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.

<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0"
  class="scrollspy-example"
  tabindex="0"
>
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Thidd heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Example with nested nav

Scrollspy は入れ子になった .nav でも動作します。ネストされた .nav が .active の場合、その親も .active になります。 ナビバーの隣の領域をスクロールして、アクティブなクラスの変化は下記を参考にしてください。

Item 1

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.

Item 1-1

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.

Item 1-2

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.

Item 2

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.

Item 3

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.

Item 3-1

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.

Item 3-2

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.

<nav
  id="navbar-example3"
  class="navbar navbar-light bg-light flex-column align-items-stretch p-3"
>
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div
  data-bs-spy="scroll"
  data-bs-target="#navbar-example3"
  data-bs-offset="0"
  tabindex="0"
>
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Example with list-group

Scrollspy は .list-group でも動作します。リストグループの隣の領域をスクロールして、アクティブなクラスが変化するのは下記を参考にしてください。

Item 1

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.

Item 2

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.

Item 3

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.

Item 4

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.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1"
    >Item 1</a
  >
  <a class="list-group-item list-group-item-action" href="#list-item-2"
    >Item 2</a
  >
  <a class="list-group-item list-group-item-action" href="#list-item-3"
    >Item 3</a
  >
  <a class="list-group-item list-group-item-action" href="#list-item-4"
    >Item 4</a
  >
</div>
<div
  data-bs-spy="scroll"
  data-bs-target="#list-example"
  data-bs-offset="0"
  class="scrollspy-example"
  tabindex="0"
>
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Usage

Via data attributes

トップバーナビゲーションに scrollspy 動作を簡単に追加するには、スパイする要素に data-bs-spy =" scroll "を追加します（通常、これは <body>です）。 次に、Bootstrap.navコンポーネントの親要素の ID またはクラスを使用して data-bs-target属性を追加します。

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Via JavaScript

CSS に position: relative; を追加した後、JavaScript で scrollspy を呼び出します。

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: "#navbar-example",
});

解決可能な ID ターゲットが必要

ナビバーリンクは、id ターゲットを持たなければなりません。例えば、<a href="#home">home</a> は、<div id="home"></div> のような DOM 内の何かに対応していなければなりません。

視認できないターゲット要素は無視

表示されていないターゲット要素は無視され、対応するナビ項目はハイライトされません。

Methods

refresh

DOM からの要素の追加や削除と同時に scrollspy を使用する場合は、次のように refresh メソッドを呼び出す必要があります。

var dataSpyList = [].slice.call(
  document.querySelectorAll('[data-bs-spy="scroll"]')
);
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh();
});

dispose

scrollspy 要素を破棄します。

getInstance

DOM 要素に関連付けられた scrollspy インスタンスを取得できるようにする静的メソッド。

var scrollSpyContentEl = document.getElementById("content");
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl); // Returns a Bootstrap scrollspy instance

Options

オプションは、データ属性または JavaScript で渡すことができます。データ属性の場合は、 data-bs-offset =" "のように、オプション名を data-bs-に追加します。

Name Type Default Description
offset number 10 スクロールの位置を計算する際にトップからオフセットするピクセル
method string auto 検出された要素がどのセクションにあるかを見つけます。autoは、スクロール座標の取得に最適な方法を選択します。 offset は Element.getBoundingClientRect() メソッドを使用してスクロール座標を取得します。 position は HTMLElement.offsetTop また、 HTMLElement.offsetLeft プロパティを使用してスクロール座標を取得します。
target string | jQuery object | DOM element Scrollspy プラグインを適用する要素を指定します。

Events

Event type Description
activate.bs.scrollspy このイベントは、新しいアイテムが scrollspy によってアクティブになるたびに scroll 要素で発生します。 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]');
firstScrollSpyEl.addEventListener("activate.bs.scrollspy", function () {
  // do something...
});