我正在尝试获取bootstraps scrollspy或任何" scroll spy"键入脚本，以在 scrollable Div 上使用 #reportContainer。
我的标签中有两个链接，因为一个是删除页面的删除按钮。与类.page的链接是我想要的。
有人可以帮我做这个吗？
导航
<div id="leftReportBar">
<div id="leftBarContainer">
<ul id="reportNav" class="ui-sortable">
<li id="page_1_links">
<a href="#" class="removePage ss-delete" id="page_1"> </a>
<a class="page" href="#page1">Page 1</a>
</li>
<li id="page_2_links">
<a href="#" class="removePage ss-delete" id="page_2"> </a>
<a class="page" href="#page2">Page 2</a>
</li>
<li id="page_3_links">
<a href="#" class="removePage ss-delete" id="page_3"> </a>
<a class="page" href="#page3">Page 3</a>
</li>
</ul>
</div>
</div>
目标
<div id="reportContainer" style="height: 224px;" data-spy="scroll">
<div id="zoomMe">
<form action="#" id="page1">
<div id="formPage">
<!-- CONTENT GOES HERE -->
</div>
</form>
<form action="#" id="page2">
<div id="formPage">
<!-- CONTENT GOES HERE -->
</div>
</form>
<form action="#" id="page3">
<div id="formPage">
<!-- CONTENT GOES HERE -->
</div>
</form>
</div>
</div>
如果将data-target添加到可滚动div中以识别导航，该怎么办，无论是leftBarContainer还是leftReportBar？
<div id="reportContainer" style="height: 224px;" data-spy="scroll" data-target="#leftBarContainer">
您没有指定Bootstrap版本，但是在v2.3.2中，我在网站上工作：
<body data-spy="scroll" data-target=".sidebar">
<!-- Fixed navbar -->
<!-- snip -->
<div class="container">
<div class="row">
<!-- Sidebar -->
<nav class="span3 sidebar hidden-print" role="complementary">
<ul class="nav nav-list bs-docs-sidenav affix" role="navigation">
<li>
<a href="#description">Description
<i class="icon-chevron-right"></i>
</a>
</li>
<li>
<a href="#download">Download
<i class="icon-chevron-right"></i>
</a>
</li>
</ul>
</nav>
<!-- Main Content -->
<div class="span9" role="main">
</div>
</div>
</div>
</body>
在bootstrap doc中说
卷轴需要位置：相对；在您监视
的元素上
如果您要制作可滚动容器（身体除外），请确保具有高度集和溢出Y：滚动；应用于它 - 以及tabindex =; 0＆quot a tabindex确保键盘访问。
https://getbootstrap.com/docs/5.0/components/scrollspy/
为了满足这些要求，我在DIV上使用类scroll-container，在下面的示例中：
.scroll-container {
position: relative;
height: 1000px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.scroll-container {
position: relative;
height: 1000px;
overflow-y: scroll;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body >
<div
class="scroll-container"
tabindex="0"
data-spy="scroll"
data-target=".navbar"
data-offset="50"
>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</div>
</body>
</html>示例的原始来源，使用身体上的卷轴：
https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp