可滚动 div 上的 Bootstrap scrollspy答案

【问题标题】：Bootstrap scrollspy on scrollable div可滚动 div 上的 Bootstrap scrollspy
【发布时间】：2014-02-13 00:37:54
【问题描述】：

我正在尝试让 Bootstraps ScrollSpy 或任何“滚动间谍”类型的脚本在名为 #reportContainer 的 scrollable div 上工作。

我的标签中有两个链接，因为一个是删除页面的删除按钮。与.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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap scrollspy

【解决方案1】：

如果您将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>

【讨论】：

感谢您的帮助@nekno。我已经尝试过 <div id="reportContainer" data-spy="scroll" data-target="#leftReportBar"> 以及几乎所有其他选项，但它不起作用。

【解决方案2】：

在引导文档中它说

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

如果你正在制作一个可滚动的容器（除了 body），一定要设置一个高度和 overflow-y:scroll;应用到它——连同一个 tabindex="0" 以确保键盘访问。

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>

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

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

【讨论】：