更新日: 2018 / 10 / 18

Bootstrap4 Scrollspyの使い方とカスタマイズサンプル

カテゴリー: コーディング

Bootstrap4のScrolspy(スクロールスパイ)コンポーネントの使い方を解説。

聞きなれない名前ですが、スクロールスパイは画面のスクロールを監視してナビゲションのスタイルを変更できるものです。

LPやサイドメニューでよく使われるので、使えるようになっておくと以外と便利。

Bootstrap4 ScrolSpy(スクロールスパイ)の基本的な使い方

Bootstrap4のScrolspyはそれ自体がコンポーネントとしてあるのではなく、監視対象と連動するメニューを指定するだけで機能します。

監視対象は基本的にメインのコンテンツで、ここにdata-spy="scroll"を入れるだけ。

連動するメニューは、NavbarでもなんでもOK、hrefとメインコンテンツのidが紐付いていれば動きます。

ScrolSpyの基本構造

コンテンツをスクロールすることで、画面上部に設置したナビゲーションと連動します。ナビゲーションのhref属性にはコンテンツのidを入れておくことで自動的に認識されるようになります。

コンテンツの方には、data-spy="scroll"を入れ、data-target="#id"で連動するナビゲーションを指定します。

<nav id="navbar-spy" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-spy" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

ScrolSpyで使えるオプションまとめ

ScrolSpyは監視するコンテンツと、連動するナビゲーションを指定するだけで動きます。

オフセットを指定すると、コンテンツの少し手前(指定した値分)でナビゲーションが反応するようになります。

オプション

オプション名 デフォルト 説明
data-spy scroll 監視するコンテンツ、必須
data-target #id 紐付けるメニュー、必須、ターゲットはidのみ有効
data-offset 10 スクロール位置のオフセット

ScrolSpyのサンプルコード

サンプルのデモページを見る

Bootstrap4のスクロールスパイで作る、Qiita風サイドメニュー

Bootstrap4のスクロールスパイで作る、Qiita風サイドメニュー

Qiitaのサイドメニューのようなコンテンツのスクロールと連動するメニューも簡単に作成可能。

サイドバーに.sticky-topを入れておけば、画面上部にくっついてくれます。

<body data-spy="scroll" data-target="#sidemenu-1" data-offset="10">

<div class="container mb-5">
  <h1 class="h3 mb-4">Bootstrap4のスクロールスパイで作る、Qiita風サイドメニュー</h1>
  <div class="row">
    <div class="col-9">
      <h4 id="menu-1">Item 1</h4>
      <p class="mb-5">...</p>
      <h5 id="menu-1-1">Item 1-1</h5>
      <p class="mb-5">...</p>
      <h5 id="menu-1-2">Item 1-2</h5>
      <p class="mb-5">...</p>
      <h4 id="menu-2">Item 2</h4>
      <p class="mb-5">...</p>
      <h4 id="menu-3">Item 3</h4>
      <p class="mb-5">...</p>
      <h4 id="menu-4">Item 4</h4>
      <p class="mb-5">...</p>
      <h4 id="menu-5">Item 5</h4>
      <p class="mb-5">...</p>
    </div>
    <div class="col-3">
      <ul id="sidemenu-1" class="nav nav-pills flex-column sticky-top">
        <li class="nav-item">
          <a href="#menu-1" class="nav-link">Menu1</a>
          <ul id="sidemenu-1" class="nav nav-pills flex-column pl-3">
            <li class="nav-item"><a href="#menu-1-1" class="nav-link">Menu1-1</a></li>
            <li class="nav-item"><a href="#menu-1-2" class="nav-link">Menu1-2</a></li>
          </ul>
        </li>
        <li class="nav-item"><a href="#menu-2" class="nav-link">Menu2</a></li>
        <li class="nav-item"><a href="#menu-3" class="nav-link">Menu3</a></li>
        <li class="nav-item"><a href="#menu-4" class="nav-link">Menu4</a></li>
        <li class="nav-item"><a href="#menu-5" class="nav-link">Menu5</a></li>
      </ul>
    </div>
  </div>
</div>