BootstrapでScrollspyの実装

Bootstrapでこの例と同様のScrollspyを制作しているのですが、上手くいきません。

読み込めていないソースコードがあるのでしょうか？

#該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
8</head>
9<body>
10    
11    <div id="list-example" class="list-group">
12        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
13        <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
14        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
15        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
16        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 5</a>
17        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 6</a>
18        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 7</a>
19      </div>
20      <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
21        <h4 id="list-item-1">Item 1</h4>
22        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
23        <h4 id="list-item-2">Item 2</h4>
24        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
25        <h4 id="list-item-3">Item 3</h4>
26        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
27        <h4 id="list-item-4">Item 4</h4>
28        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
29        <h4 id="list-item-5">Item 5</h4>
30        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
31        <h4 id="list-item-6">Item 6</h4>
32        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
33        <h4 id="list-item-7">Item 7</h4>
34        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
35
36    </div>
37
38
39    <!-- JavaScript -->
40    <script>
41        $('body').scrollspy({ target: '#navbar-example' })
42    </script>
43    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
44    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
45    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
46</body>
47</html>

#結果

行動規範の内容に同意します

回答2件

ベストアンサー

Scrollspyのドキュメントの理解は、初心者には難しいと思います。
まずBootstrapを使い慣れているひと前提で、必要な最低限のコードだけしか提示してません。

①まず最初に、

$('body').scrollspy({ target: '#navbar-example' })

がJqueryやBootStrapのjsファイルが読み込まれる前に実行されてしまっているので、エラーになっています。順番的にJqueryやBootStrapのscriptタグのあとにもってきてください。

②①で順番を云々書いたものの、実はT-yamadaさんの書き方は、ドキュメントの「Via data attributes」で説明されているもので、javascriptでscrollspy()を使わなくても、画面ロード時にdata-xxxx属性を付けておくことで自動でscrollspyが生成されるやり方です。
なので、

$('body').scrollspy({ target: '#navbar-example' })

をする必要はありません。data-xxxx属性を使わずにあるタグにscrollspyを付与したいなどの場合にこの方法を使います。

③ドキュメントのサンプルでは横並びになっているのに、提示されたコードでは縦並びになってしまっていのはサンプルにはBootstrapを利用している人には説明要らないよねって感じで"row"と"col"を使ったグリッドで分割しているコードがはしょられてます。

④横並びにしたあとに左右を同じ高さに揃えるCSSについても省略しているので、そこもサンプルは親切ではないですね。正直これに関してはブラウザの開発者モードで調べるしかないかも。（.scrollspy-example）

以上を踏まえたコードです

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
8  </head>
9  <body>
10    <style>
11.scrollspy-example {
12  position: relative;
13  height: 200px;
14  margin-top: .5rem;
15  overflow: auto;
16}
17    </style>
18    <div class="row">
19      <div class="col-4">
20        <div id="list-example" class="list-group">
21          <a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
22          <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
23          <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
24          <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
25        </div>
26      </div>
27      <div class="col-8">
28        <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
29          <h4 id="list-item-1">Item 1</h4>
30          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
31          <h4 id="list-item-2">Item 2</h4>
32          <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
33          <h4 id="list-item-3">Item 3</h4>
34          <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
35          <h4 id="list-item-4">Item 4</h4>
36          <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
37        </div>
38      </div>
39    </div>
40    <!-- JavaScript -->
41    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
42    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
43    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
44  </body>
45</html>

投稿2020/03/19 10:29

storm3

総合スコア330

退会済みユーザー

2020/03/19 10:45

こんばんは。ご回答ありがとうございます。 >②①で順番を云々書いたものの、実はT-yamadaさんの書き方は、ドキュメントの「Via data attributes」で説明されているもので、javascriptでscrollspy()を使わなくても、画面ロード時にdata-xxxx属性を付けておくことで自動でscrollspyが生成されるやり方です。 id属性を指定するだけで記述しなくても良い点はまだお恥ずかしいながら、無知でしたのでとても参考になりました。Bootstrapはここまで便利なんですね。。提示してみたコードを実行したところ、想定している通りの実装となりました。ありがとうございます。ここら辺の説明に関しては「Via data attributes」を参照した方が良いのでしょうか？

storm3

2020/03/19 16:25

>ここら辺の説明に関しては「Via data attributes」を参照した方が良いのでしょうか？たしかに読むに越したことはないですが、こちらのサイトが日本語でわかりやすかも http://www.tohoho-web.com/bootstrap/scrollspy.html#section-3 HTMLタグだけでscrollspyを有効化するか、Jascript側から指定したタグに対してscrollspyを有効化するかは使い方次第です。どちらでscrollspyを生成しても同じですが、仕事柄、動的なWebページを作る場合はJavascriptで操作するほうが多いですかね。仮に今回のものをdata属性からjavascriptに書き換えた場合 <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> ↓ <div class="scrollspy-example"> こうするとdata-spy="scroll"が消えたことでspyscrollが作られず右のスクロールを上下させて見出しを変えても、左のリストが連動しなくなります。また左のリストをクリックしてもクリックしたとこの色が変わらなくなります。次にこの状態でjQuery、bootstrapのscriptタグのあとに下記のscriptを追加。 <script> $('.scrollspy-example').scrollspy({ target:'#list-example', offset:0 }); </script> javascriptから<div class="scrollspy-example">タグに対してspyscrollを付与します。どっちでも結果は同じですので、どちらでもお好きなほうで。

退会済みユーザー

2020/03/20 06:36

ご返信ありがとうございます。提示してもらったサイトを参考に進めてみます。ありがとうございます。

行動規範の内容に同意します

グリッドシステム等を使って体裁を整える必要があるのと、
spyのターゲット自身がスクロールできるようになっていること、
また

    <script>
        $('body').scrollspy({ target: '#navbar-example' })
    </script>

こちらの部分をjqueryを読み込んだあとかつ、
正しいターゲットのセレクタを指定する必要があるみたいですね。

以下を適当なエディタにコピーしブラウザで開くと動作するかと思います。

HTML
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
2<style>
3 body {
4   position: relative;
5 }
6</style>
7
8<div class="container">
9  <div class="bd-example">
10   <div class="row">
11     <div class="col-4">
12       <div id="list-example" class="list-group">
13         <a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
14         <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
15         <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
16         <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
17       </div>
18     </div>
19     <div class="col-8" >
20       <div style="height:200px; overflow:scroll" data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" id="scrollspy-example">
21         <h4 id="list-item-1">Item 1</h4>
22         <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
23         <h4 id="list-item-2">Item 2</h4>
24         <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
25         <h4 id="list-item-3">Item 3</h4>
26         <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
27         <h4 id="list-item-4">Item 4</h4>
28         <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
29       </div>
30     </div>
31   </div>
32  </div>
33</div>
34
35<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
36<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
37<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
38<script>
39 $('#scrollspy-example').scrollspy({ target: '#list-example' });
40</script>
41