Bootstrap

Bootstrapでスクロールスパイ（Scrollspy）を作る方法

2022年8月20日 by single コメントはまだありません

Bootstrapでスクロールスパイ（Scrollspy）を作る方法

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

スクロールスパイ実装

  • nav component or list group 上で使用する必要があります。
  • 通常は の <body>にposition: relative; を設定します。
  • <body>以外の要素で使用する場合は、height を設定し、overflow-y: scroll; を設定します。
  • アンカー (<a>）は必須で、その id を持たさなければなりません。
<body>に設定する方法
<body data-bs-spy="scroll" data-bs-target="#navbar-example" style="position: relative;">
  ...
</body>

<body>に設定する場合には、二つの属性（「data-bs-spy」と「data-bs-target」）を設定し、スタイルに「position:relative」を設定してください。

「data-bs-spy」にはscrollを、「data-bs-target」には、ナビゲーションオブジェクトのIDを指定してください。

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

最後に表示エリアとナビゲーションメニューをアンカータグ（<a>）で実装して、紐づければ、完了です。

<body data-bs-spy="scroll" data-bs-target="#navbar-example" style="position: relative;">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" href="#scrollspyHeading1">１番目</a>
      </li>
    </ul>
  </div>
  <div id="scrollspyHeading1" >
    <h1>セクション１</h1>
    <div style="height:500px"></div>
  </div>
</body>

<body>以外に設定する場合
<div
  data-bs-spy="scroll"
  data-bs-target="#navbar-example2"
  data-bs-offset="0"
  class="scrollspy-example"
  tabindex="0"
  style="position:relative;height:500px;margin-top:.5rem;overflow:auto"
>
  <h4 id="scrollspyHeading1">第１セクション</h4>
  <p><div style="height:500px"></div></p>
    ...
</div>

<body>以外で設定する場合には、コンテンツエリアに対して属性「data-bs-spy」と「data-bs-target」を設定してください。

「data-bs-target」はナビゲーションエリアのIDと紐づけてください。

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">ナビゲーションバー</a>
  <ul class="nav nav-pills ">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">１番目</a>
    </li>
      ...
  </ul>
</nav>

<div
  data-bs-spy="scroll"
  data-bs-target="#navbar-example2"
  data-bs-offset="0"
  class="scrollspy-example"
  tabindex="0"
  style="position:relative;height:500px;margin-top:.5rem;overflow:auto"
>
  <h4 id="scrollspyHeading1">第１セクション</h4>
  <p><div style="height:500px"></div></p>
    ...
</div>

最後に表示エリアとナビゲーションメニューをアンカータグ（<a>）で実装して、紐づければ、完了です。

<body>に設定する場合のサンプル

<body>に設定するサンプルが以下のデモページとHTMLコードになります。

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Scrollspy demo(1)</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" style="position: relative;">
  <div class="container">
    <div class="row">
      <div>
        <div id="navbar-example" class="sticky-top bg-light " >
          <ul class="nav nav-tabs nav-pills" role="tablist">
          <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading1">１番目</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading2">２番目</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading3">３番目</a>
          </li>
          </ul>
        </div>
        <div id="scrollspyHeading1" >
          <h1>セクション１</h1>
          <div style="height:500px"></div>
        </div>
        <div id="scrollspyHeading2" >
          <h1>セクション２</h1>
          <div style="height:500px"></div>
        </div>
        <div id="scrollspyHeading3" >
          <h1>セクション３</h1>
          <div style="height:500px"></div>
        </div>
      </div>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

<body>以外に設定する場合のサンプル

<body>以外に設定する場合のサンプルが以下のデモページとHTMLコードになります。

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Scrollspy demo(2)</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div>
        <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
          <a class="navbar-brand" href="#">ナビゲーションバー</a>
          <ul class="nav nav-pills ">
            <li class="nav-item">
              <a class="nav-link" href="#scrollspyHeading1">１番目</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#scrollspyHeading2">２番目</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                data-bs-toggle="dropdown"
                href="#"
                role="button"
                aria-expanded="false"
                >ドロップダウン</a
              >
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#scrollspyHeading3">３番目</a></li>
                <li><a class="dropdown-item" href="#scrollspyHeading4">４番目</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#scrollspyHeading5">５番目</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"
          style="position:relative;height:500px;margin-top:.5rem;overflow:auto"
        >
          <h4 id="scrollspyHeading1">第１セクション</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="scrollspyHeading2">第２セクション</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="scrollspyHeading3">第３セクション</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="scrollspyHeading4">第４セクション</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="scrollspyHeading5">第５セクション</h4>
          <p><div style="height:500px"></div></p>
        </div>
      </div>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

ネストされたナビのサンプル

デモ

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Scrollspy demo(3)</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example3" style="position: relative;">
  <div class="container">
    <div class="row">
      <div class="col-3 ">
        <nav
          id="navbar-example3"
          class="navbar navbar-light bg-light flex-column align-items-stretch p-3 sticky-top "
        >
          <a class="navbar-brand" href="#">ナビゲーションバー</a>
          <nav class="nav nav-pills flex-column">
            <a class="nav-link" hre	f="#item-1">項目 1</a>
            <nav class="nav nav-pills flex-column">
              <a class="nav-link ms-3 my-1" href="#item-1-1">項目 1-1</a>
              <a class="nav-link ms-3 my-1" href="#item-1-2">項目 1-2</a>
            </nav>
            <a class="nav-link" href="#item-2">項目 2</a>
            <a class="nav-link" href="#item-3">項目 3</a>
            <nav class="nav nav-pills flex-column">
              <a class="nav-link ms-3 my-1" href="#item-3-1">項目 3-1</a>
              <a class="nav-link ms-3 my-1" href="#item-3-2">項目 3-2</a>
            </nav>
          </nav>
        </nav>
      </div>
      <div class="col-9">
        <div>
          <h4 id="item-1">項目 1</h4>
          <p><div style="height:500px"></div></p>
          <h5 id="item-1-1">項目 1-1</h5>
          <p><div style="height:500px"></div></p>
          <h5 id="item-1-2">項目 1-2</h5>
          <p><div style="height:500px"></div></p>
          <h4 id="item-2">項目 2</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="item-3">項目 3</h4>
          <p><div style="height:500px"></div></p>
          <h5 id="item-3-1">項目 3-1</h5>
          <p><div style="height:500px"></div></p>
          <h5 id="item-3-2">項目 3-2</h5>
          <p><div style="height:500px"></div></p>
        </div>
      </div>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

list-groupのサンプル

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Bootstrap Scrollspy demo(3)</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#list-example" style="position: relative;">
  <div class="container">
    <div class="row">
      <div class="col-3 ">
        <div id="list-example" class="list-group sticky-top">
          <a class="list-group-item list-group-item-action" href="#list-item-1">項目1</a>
          <a class="list-group-item list-group-item-action" href="#list-item-2">項目2</a>
          <a class="list-group-item list-group-item-action" href="#list-item-3">項目3</a>
          <a class="list-group-item list-group-item-action" href="#list-item-4">項目4</a>
        </div>
      </div>
      <div class="col-9">
        <div>
          <h4 id="list-item-1">項目1</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="list-item-2">項目2</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="list-item-3">項目3</h4>
          <p><div style="height:500px"></div></p>
          <h4 id="list-item-4">項目4</h4>
          <p><div style="height:500px"></div></p>
        </div>
      </div>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

ご参考

関連ページ