问题描述
我试图获得一个滚动显示,但是我正在监视的元素和内容看起来是分开的,它们一个在另一个的下面。
#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>
这是一个https://codepen.io/ShreyasG/pen/YzqmqMv代码段
解决方法
尝试使用此代码。
<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>
,
将#list-example 类更改为“ .scrollspy-example ”,然后将高度更改为150px。
ViewCell
.scrollspy-example {
position: relative;
overflow-y: scroll;
height: 150px;
}
确保以整页查看。