我正在尝试在 Bootstrap 4 中使用列表组实现 Scrollspy，但它不起作用

Question

I was trying to get a scrollspy but the elements which I am spying on and the contents appear separate, they appear one below the other.

 #list-example{ position: relative; overflow-y: scroll; height: 300px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div id="list-example" class="list-group" > <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a> <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> </div> <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> <h4 id="list-item-1">Item 1</h4> <p>...</p> <h4 id="list-item-2">Item 2</h4> <p>...</p> <h4 id="list-item-3">Item 3</h4> <p>...</p> <h4 id="list-item-4">Item 4</h4> <p>...</p> </div> </div>

Here is a https://codepen.io/ShreyasG/pen/YzqmqMv snippet

Answer 1

Try this code.

<div class="container-fluid">
<div  class="list-group fixed-top"  data-spy="scroll" data-target="#list-example" data-offset="0">
    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div  class="scrollspy-example" id="list-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
</div>

Answer 2

Change the #list-example class to " .scrollspy-example ", then change the height to 150px.

 .scrollspy-example { position: relative; overflow-y: scroll; height: 150px; }

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> <div class="container-fluid"> <div id="list-example" class="list-group"> <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a> <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> </div> <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> <h4 id="list-item-1">Item 1</h4> <p>...</p> <h4 id="list-item-2">Item 2</h4> <p>...</p> <h4 id="list-item-3">Item 3</h4> <p>...</p> <h4 id="list-item-4">Item 4</h4> <p>...</p> </div> </div>

Make sure to view it in Full Page..