滚动式

Scrollspy-Bootstrap 5和Material Design 2.0组件

根据滚动位置自动将Bootstrap导航或列表组组件更新为 指示当前在视口中处于活动状态的链接。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Subsection A

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Subsection B

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.


          <div class="row">
            <div class="col-md-8">
              <!-- Spied element -->
              <div
                data-mdb-spy="scroll"
                data-mdb-target="#scrollspy"
                data-mdb-offset="0"
                class="scrollspy-example"
              >
                <section id="example-1">
                  <h3>Section 1</h3>
                  ...
                </section>
                <section id="example-2">
                  <h3>Section 2</h3>
                  ...
                </section>
                <section id="example-3">
                  <h3>Section 3</h3>
                  ...
                  <section id="example-sub-A">
                    <h3>Subsection A</h3>
                    ...
                  </section>
                  <section id="example-sub-B">
                    <h3>Subsection B</h3>
                    ...
                  </section>
                </section>
                <section id="example-4">
                  <h3>Section 4</h3>
                  ...
                </section>
              </div>
              <!-- Spied element -->
            </div>

            <div class="col-md-4">
              <!-- Scrollspy -->
              <div id="scrollspy" class="sticky-top">
                <ul class="nav flex-column nav-pills menu-sidebar">
                  <li class="nav-item">
                    <a class="nav-link" href="#example-1">Section 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#example-2">Section 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#example-3">Section 3</a>
                    <ul class="nav flex-column ps-3">
                      <li class="nav-item">
                        <a class="nav-link" href="#example-sub-A">Subsection A</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#example-sub-B">Subsection B</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#example-4">Section 4</a>
                  </li>
                </ul>
              </div>
              <!-- Scrollspy -->
            </div>
          </div>
        

          /* Styles required only for the example above */
          .scrollspy-example {
            position: relative;
            height: 200px;
            overflow: auto;
          }
        

这个怎么运作

Scrollspy有一些要求才能正常运行:

  • 必须在Bootstrap nav 组件上使用,或 列表组
  • Scrollspy通常在您监视的元素上需要 position:relative; <body>.
  • 侦查除 <body>, 确保有一个 设置了 height ,并应用了 overflow-y:scroll;
  • 锚点(<a>) 是必需的,并且必须指向具有该元素的元素 id.

成功实施后,您的导航或列表组将相应地进行更新, .active 根据其相关目标从一个项目到下一个项目进行分类。

滚动式 - API


用法

通过数据属性

要将滚动行为轻松添加到顶部导航,请添加 data-mdb-spy="scroll" 到要监视的元素(通常是 将是 <body>). 然后添加 data-mdb-target 属性 具有任何MDB的父元素的ID或类 .nav 零件。


          <body data-mdb-spy="scroll" data-mdb-target="#navbar-example">
            ...
            <div id="navbar-example">
              <ul class="nav nav-tabs" role="tablist">
                ...
              </ul>
            </div>
            ...
          </body>
        
 body { position: relative; } 

通过JavaScript

在CSS中添加 position:relative; 后,通过JavaScript调用scrollspy:


          const scrollSpy = new mdb.ScrollSpy(document.body, {
            target: '#navbar-example'
          })
        

所需的可解析ID目标: 导航栏链接必须具有可解析的ID目标。 例如,一个 <a href="#home">home</a> 必须与某物相对应 在DOM中 <div id="home"></div>.

不可见的目标元素被忽略: 目标元素不可见 将被忽略,并且其对应的导航项将永远不会突出显示。

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。


          $('.example-class').scrollSpy(options);
        

选件

可以通过数据属性或JavaScript传递选项。对于数据属性,请附加 选项名称为 data-mdb-,如 data-mdb-offset =“” 中一样。

Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.
method string auto Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
target string | jQuery object | DOM element Specifies element to apply Scrollspy plugin.

方法

Name Description Example
refresh When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method instance.refresh()
dispose Destroys an element’s tab. instance.dispose()

        const dataSpyList = [].slice.call(document.querySelectorAll('[data-mdb-spy="scroll"]'))
        dataSpyList.forEach((dataSpyEl) => {
          mdb.ScrollSpy.getInstance(dataSpyEl).refresh()
        })
      

大事记

Event type Description
activate.mdb.scrollspy This event fires on the scroll element whenever a new item becomes activated by the scrollspy.

      const firstScrollSpyEl = document.querySelector('[data-mdb-spy="scroll"]')
      firstScrollSpyEl.addEventListener('activate.mdb.scrollspy', () => {
        // do something...
      })
    

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码 导入此组件:


        import { ScrollSpy } from 'mdb-ui-kit';