Сцроллспи

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

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

Како то ради

Сцроллспи искључује .activeкласу на елементима сидра ( <a>) када се елемент са idреференцама сидра hrefпомера у приказ. Сцроллспи се најбоље користи у комбинацији са Боотстрап навигацијском компонентом или групом листе , али ће такође радити са свим елементима сидра на тренутној страници. Ево како то функционише.

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

Примери

Померајте област испод траке за навигацију и гледајте како се активна класа мења. Отворите падајући мени и гледајте како ће падајуће ставке такође бити истакнуте.

Први наслов

Ово је неки садржај чувара места за страницу за скроловање. Имајте на уму да док скролујете надоле по страници, одговарајућа веза за навигацију је истакнута. Понавља се у целом примеру компоненте. Овде настављамо да додајемо још примерака да бисмо нагласили померање и истицање.

Други наслов

Трећи наслов

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

Пети наслов

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

Нестед нав

Сцроллспи такође ради са угнежђеним .navс. .navАко је угнежђено .active, његови родитељи ће такође бити .active. Померајте област поред навигационе траке и гледајте како се активни разред мења.

Ставка 1

Имајте на уму да ЈаваСцрипт додатак покушава да изабере прави елемент између свега што може бити видљиво. Више видљивих циљева за скроловање у исто време може изазвати неке проблеме.

Ставка 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>

Група листа

Сцроллспи такође ради са .list-groupс. Померите област поред групе листе и гледајте како се активна класа мења.

Ставка 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>

Једноставна сидра

Сцроллспи није ограничен на компоненте за навигацију и групе листа, тако да ће радити на свим <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класу. Сцроллспи инстанце иницијализоване у невидљивом омотачу ће игнорисати све циљне елементе. Користите 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компоненте Боотстрап-а.

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

Преко ЈаваСцрипт-а

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

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

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

Име	Тип	Уобичајено	Опис
`rootMargin`	низ	`0px 0px -25%`	Интерсецтион Обсервер роотМаргин валидне јединице, када се израчунава позиција померања.
`smoothScroll`	боолеан	`false`	Омогућава глатко померање када корисник кликне на везу која се односи на СцроллСпи опсерваблес.
`target`	стринг, ДОМ елемент	`null`	Одређује елемент за примену додатка Сцроллспи.
`threshold`	низ	`[0.1, 0.5, 1]`	`IntersectionObserver` праг важећег уноса, када се израчунава позиција скроловања.

Застареле опције

Све до в5.1.3 користили смо offset& methodопције, које су сада застареле и замењене са rootMargin. Да бисмо задржали компатибилност уназад, наставићемо да анализирамо дато offsetу rootMargin, али ова функција ће бити уклоњена у в6 .

Методе

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

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

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

Догађаји

Догађај	Опис
`activate.bs.scrollspy`	Овај догађај се покреће на елементу за померање сваки пут када је сидро активирано од стране сцроллспи-а.

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

Сцроллспи

Како то ради

Примери

Навбар

Први наслов

Други наслов

Трећи наслов

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

Пети наслов

Нестед нав

Ставка 1

Ставка 1-1

Ставка 1-2

тачка 2

тачка 3

Ставка 3-1

тачка 3-2

Група листа

Ставка 1

тачка 2

тачка 3

тачка 4

Једноставна сидра

Ставка 1

тачка 2

тачка 3

тачка 4

тачка 5

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

Употреба

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

Преко ЈаваСцрипт-а

Опције

Методе

Догађаји