Scrollspy

Автоматски ажурирајте ја навигацијата на Bootstrap или наведете ги компонентите на групата врз основа на позицијата на лизгање за да покаже која врска е моментално активна во приказот.

На оваа страница

Како работи

Scrollspy ја префрлува .activeкласата на <a>елементите на сидро ( ) кога елементот со idреференциран од сидрото hrefсе прелистува во поглед. Scrollspy најдобро се користи заедно со компонента за навигација на Bootstrap или група со списоци , но исто така ќе работи и со сите елементи за прицврстување на тековната страница. Еве како функционира.

За да започнете, scrollspy бара две работи: навигација, група списоци или едноставен сет на врски, плус контејнер што може да се движи. Контејнерот за лизгање може да биде <body>или прилагоден елемент со множество heightи overflow-y: scroll.
На контејнерот што може да се скролува, додајте data-bs-spy="scroll"и data-bs-target="#navId"каде navIdе единственото idод поврзаната навигација. Не заборавајте да вклучите и a tabindex="0"за да обезбедите пристап до тастатурата.
Додека го скролувате контејнерот „шпиониран“, .activeкласа се додава и отстранува од прицврстените врски во поврзаната навигација. Врските мора да имаат решливи idцели, во спротивно тие се игнорираат. На пример, <a href="#home">home</a>мора да одговара на нешто во DOM како<div id="home"></div>
Целните елементи кои не се видливи ќе бидат игнорирани. Погледнете го делот Невидливи елементи подолу.

Примери

Скролувајте ја областа под лентата за навигација и гледајте како се менува активната класа. Отворете го паѓачкото мени и гледајте како се истакнуваат и паѓачките ставки.

Првиот наслов

Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.

Втор наслов

Трет наслов

Четвртиот наслов

Петти наслов

<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Вгнездена навигација

Scrollspy работи и со вгнездени .navс. .navАко е вгнездено .active, ќе бидат и неговите родители .active. Скролувајте ја областа до лентата за навигација и гледајте како се менува активната класа.

Точка 1

Имајте на ум дека приклучокот JavaScript се обидува да го избере вистинскиот елемент меѓу сите што може да бидат видливи. Повеќе видливи цели за прелистување во исто време може да предизвикаат некои проблеми.

Точка 1-1

Точка 1-2

Точка 2

Точка 3

Точка 3-1

Точка 3-2

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Листа група

Scrollspy работи и со .list-groups. Скролувајте ја областа веднаш до групата со списоци и гледајте како се менува активната класа.

Точка 1 Точка 2 Точка 3 Точка 4

Точка 1

Точка 2

Точка 3

Точка 4

<div class="row">
  <div class="col-4">
    <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">Item 2</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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <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>
</div>

Едноставни сидра

Scrollspy не е ограничен само на компонентите за навигација и групите списоци, така што ќе работи на сите <a>елементи за прицврстување во тековниот документ. Скролувајте ја областа и гледајте како се .activeменува класот.

Точка 1 Точка 2 Точка 3 Точка 4 Точка 5

Точка 1

Точка 2

Точка 3

Точка 4

Точка 5

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Невидливи елементи

Целните елементи што не се видливи ќе бидат игнорирани и нивните соодветни ставки за навигација нема да добијат .activeкласа. Примерите на Scrollspy иницијализирани во невидлива обвивка ќе ги игнорираат сите целни елементи. Користете го refreshметодот за да проверите дали има елементи што може да се набљудуваат откако обвивката ќе стане видлива.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

Употреба

Преку атрибути на податоци

За лесно додавање на однесувањето на лизгање во навигацијата на горната лента, додајте data-bs-spy="scroll"го елементот што сакате да го шпионирате (најчесто ова е <body>). Потоа додадете го data-bs-targetатрибутот со името idили класата на основниот елемент на која било .navкомпонента Bootstrap.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Преку JavaScript

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

Опции

Бидејќи опциите може да се пренесат преку атрибути на податоци или JavaScript, можете да додадете име на опција на data-bs-, како во data-bs-animation="{value}". Погрижете се да го смените типот на футролата на името на опцијата од „ camelCase “ во „ ќебап-футрола “ кога ги пренесувате опциите преку атрибути на податоци. На пример, користете data-bs-custom-class="beautifier"наместо data-bs-customClass="beautifier".

Почнувајќи од Bootstrap 5.2.0, сите компоненти поддржуваат експериментален атрибут за резервирани податоци data-bs-configшто може да содржи едноставна конфигурација на компоненти како низа JSON. Кога елементот има data-bs-config='{"delay":0, "title":123}'и data-bs-title="456"атрибути, конечната titleвредност ќе биде 456и посебните атрибути на податоци ќе ги отфрлат вредностите дадени на data-bs-config. Покрај тоа, постоечките атрибути на податоци можат да ги сместат вредностите на JSON како data-bs-delay='{"show":0,"hide":150}'.

Име	Тип	Стандардно	Опис
`rootMargin`	низа	`0px 0px -25%`	Пресек Набљудувач rootMargin валидни единици, кога се пресметува позицијата на лизгање.
`smoothScroll`	булови	`false`	Овозможува непречено лизгање кога корисникот ќе кликне на врска што се однесува на ScrollSpy набљудуваните.
`target`	низа, елемент DOM	`null`	Одредува елемент за примена на приклучокот Scrollspy.
`threshold`	низа	`[0.1, 0.5, 1]`	`IntersectionObserver` валиден влез на праг , при пресметување на положбата на лизгање.

Застарени опции

До верзијата 5.1.3 користевме offset& methodопции, кои сега се застарени и заменети со rootMargin. За да ја задржиме компатибилноста наназад, ќе продолжиме да го анализираме даденото offsetна rootMargin, но оваа функција ќе биде отстранета во v6 .

Методи

Метод	Опис
`dispose`	Уништува скролање на елементот. (Ги отстранува зачуваните податоци на елементот DOM)
`getInstance`	Статичен метод за да се добие примерокот за scrollspy поврзан со елемент DOM.
`getOrCreateInstance`	Статичен метод за да се добие примерокот за scrollspy поврзан со елементот DOM или да се создаде нов во случај да не е иницијализиран.
`refresh`	Кога додавате или отстранувате елементи во DOM, ќе треба да го повикате методот на освежување.

Еве пример со користење на методот на освежување:

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

Настани

Настан	Опис
`activate.bs.scrollspy`	Овој настан се вклучува на елементот за лизгање секогаш кога ќе се активира сидро од scrollspy.

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