Bootstrap5 スクロールリスナー

Bootstrap 5 スクロール監視機能を活用してナビゲーションを向上させる

この記事では、Bootstrap 5 のスクロール監視機能を使って、Webページのユーザーエクスペリエンスを向上させる方法を解説します。この機能により、ユーザーがスクロールした位置に基づいてナビゲーションリンクの状態を自動的に更新し、現在閲覧しているコンテンツを明確に示すことができます。

スクロール監視とは

スクロール監視とは、ユーザーのスクロール位置に応じて、ナビゲーションメニュー内の対応するリンクをアクティブ状態にする機能です。これにより、ユーザーは現在ページのどのセクションを閲覧しているかを容易に把握できます。

Bootstrap 5 でのスクロール監視

Bootstrap 5 は、スクロール監視機能を簡単に実装するための scrollspy プラグインを提供しています。

scrollspy プラグインを使用するための条件:

  1. ナビゲーションリンクには <a> タグを使用し、 href 属性にページ内の対応する要素への参照（ID）を設定する必要があります。

  2. スクロールイベントを監視する要素（通常は <body>）に data-bs-spy="scroll" 属性を追加し、data-bs-target 属性にナビゲーション要素への参照（ID）を設定する必要があります。

スクロール監視の使い方

1. Bootstrap 5 を読み込む

HTML ページに Bootstrap 5 の CSS と JavaScript ファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

2. ナビゲーションを作成する

<nav> と <ul> 要素を使用してナビゲーションメニューを作成します。各ナビゲーションリンクの href 属性は、ページ内の対応するセクションの id を参照していることを確認してください。

<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#section1">セクション1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">セクション2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">セクション3</a>
      </li>
    </ul>
  </div>
</nav>

3. スクロール監視を追加する

スクロールイベントを監視する要素（ここでは <body>）に data-bs-spy="scroll" と data-bs-target="#navbar" 属性を追加します。#navbar はナビゲーション要素の id です。

<body data-bs-spy="scroll" data-bs-target="#navbar">

  <!-- コンテンツ -->

</body>

4. オフセットを設定する（オプション）

data-bs-offset 属性を使用して、スクロール監視のオフセットを設定し、ナビゲーションリンクのアクティブ化のタイミングを調整することができます。

<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="50">

サンプル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 スクロール監視</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="50">

  <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#section1">セクション1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">セクション2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">セクション3</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container-fluid" style="padding-top: 70px;">
    <div id="section1" class="container py-5">
      <h2>セクション1</h2>
      <p>コンテンツ...</p>
    </div>
    <div id="section2" class="container py-5 bg-light">
      <h2>セクション2</h2>
      <p>コンテンツ...</p>
    </div>
    <div id="section3" class="container py-5">
      <h2>セクション3</h2>
      <p>コンテンツ...</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

メソッド

refresh() メソッド

scrollspy プラグインを手動で更新します。例えば、動的にコンテンツを追加した場合などに使用します。

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar'
})
scrollSpy.refresh()

使用上の注意点

  • href 属性がページ内の有効なアンカーを参照していることを確認してください。

  • data-bs-offset 属性を使用して、アクティブ化のタイミングを微調整することができます。

よくある質問

Q1: スクロール監視が機能しません。何が問題なのでしょうか？

A1: 以下の点を確認してください。

  • Bootstrap 5 の CSS と JavaScript ファイルが正しく読み込まれていること。

  • data-bs-spy="scroll" 属性がスクロールイベントを監視する要素に設定されていること。

  • data-bs-target 属性がナビゲーション要素のIDを参照していること。

  • href 属性がページ内の有効なアンカーを参照していること。

Q2: ナビゲーションバーを固定したいのですが、どうすればよいですか？

A2: ナビゲーションバーに fixed-top または sticky-top クラスを追加してください。

Q3: スクロール位置に合わせてナビゲーションバーの色を変更するにはどうすればよいですか？

A3: JavaScript を使用して、スクロール位置に基づいてナビゲーションバーにクラスを追加または削除します。

参考資料