Bootstrap4 スクロールリスナー

Bootstrap4 スクロールスパイ

この記事では、Bootstrap4のスクロールスパイの使い方について解説します。スクロールスパイは、スクロール位置に応じてナビゲーションリンクの状態を自動的に更新する機能です。

1. スクロールスパイとは？

スクロールスパイは、スクロール位置に基づいてナビゲーションリンクの状態を自動的に更新するプラグインです。スクロール位置に応じて、対応するナビゲーションリンクに.activeクラスを動的に追加することで、アクティブな状態を表現します。

2. 使用方法

2.1 HTML構造

ページ内の異なるセクションへのリンクを含むナビゲーションリストを作成します。各リンクには、監視対象のスクロールコンテナのIDと一致するdata-target属性を追加します。


<nav id="navbar" class="navbar">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link active" 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>
</nav>

<div data-spy="scroll" data-target="#navbar" data-offset="50">
  <section id="section1">...</section>
  <section id="section2">...</section>
  <section id="section3">...</section>
</div>

2.2 JavaScriptコード

$('[data-spy="scroll"]').scrollspy()を使用してスクロールスパイプラグインを初期化します。


<script>
$(document).ready(function(){
  $('[data-spy="scroll"]').scrollspy();
});
</script>

3. オプション

スクロールスパイには、動作をカスタマイズするためのオプションがあります。主なオプションは以下の通りです。

オプション	説明	デフォルト値
`offset`	スクロールが開始されるまでのトップからのピクセル数	10
`method`	スクロールスパイの方法（`offset`または`position`）	`offset`

4. イベント

スクロールスパイは、イベントをトリガーします。主なイベントは以下の通りです。

イベント	説明
`activate.bs.scrollspy`	新しいナビゲーションリンクがアクティブになったときにトリガーされます。

5. 实例

以下は、スクロールスパイを使用した完全なコード例です。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap4 スクロールスパイの例</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">スクロールスパイの例</a>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" 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>
</nav>

<div data-spy="scroll" data-target="#navbar" data-offset="50">
  <section id="section1" class="py-5 bg-light">
    <div class="container">
      <h2>セクション1</h2>
      <p>これはセクション1の内容です。</p>
    </div>
  </section>

  <section id="section2" class="py-5">
    <div class="container">
      <h2>セクション2</h2>
      <p>これはセクション2の内容です。</p>
    </div>
  </section>

  <section id="section3" class="py-5 bg-light">
    <div class="container">
      <h2>セクション3</h2>
      <p>これはセクション3の内容です。</p>
    </div>
  </section>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function(){
    $('[data-spy="scroll"]').scrollspy();
  });
</script>

</body>
</html>

6. 重要な注意点

スクロールスパイは、jQueryに依存しています。
スクロールスパイを使用する前に、Bootstrap4のJavaScriptファイルが読み込まれていることを確認してください。

7. 関連リンク

Bootstrap4公式ドキュメント：https://getbootstrap.com/docs/4.0/components/scrollspy/