1

我正在尝试让 Bootstraps ScrollSpy 或任何“滚动间谍”类型的脚本在名为#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">&nbsp;</a>
                <a class="page" href="#page1">Page 1</a>
            </li>
            <li id="page_2_links">
                <a href="#" class="removePage ss-delete" id="page_2">&nbsp;</a>
                <a class="page" href="#page2">Page 2</a>
            </li>
            <li id="page_3_links">
                <a href="#" class="removePage ss-delete" id="page_3">&nbsp;</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>
4

2 回答 2

0

如果您将 a 添加data-target到可滚动的 div 以标识导航，无论是 asleftBarContainer还是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>
于 2014-01-22T19:23:12.910 回答
0

在引导文档中它说

Scrollspy 需要位置：相对；在你正在监视的元素上

如果您正在制作一个可滚动的容器（除了主体），请确保设置了高度并溢出-y：滚动；应用于它 - 与 tabindex="0" 一起确保键盘访问。

https://getbootstrap.com/docs/5.0/components/scrollspy/

为了满足这些要求，我scroll-container在下面的示例中在 div 上使用了一个类：

.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>

示例的原始来源，在 body 上使用 scrollspy：

https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

于 2021-10-05T09:50:26.573 回答