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 също работи с вложени .navs. Ако вложеното .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

Това е малко съдържание на контейнер за страницата ScrollSpy. Имайте предвид, че докато пре��ъртате страницата надолу, подходящата връзка за навигация се маркира. Повтаря се в целия пример на компонента. Продължаваме да добавяме още примерни копия тук, за да подчертаем превъртането и подчертаването.

Точка 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()
  })
})

Използване

Чрез атрибути на данни

За да добавите лесно scrollspy поведение към вашата навигация в горната лента, добавете 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 ” на „ kebab-case ”, когато предавате опциите чрез атрибути на данни. Например използвайте 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 observables.
`target`	низ, DOM елемент	`null`	Указва елемент за прилагане на приставката Scrollspy.
`threshold`	масив	`[0.1, 0.5, 1]`	`IntersectionObserver` праг на валиден вход при изчисляване на позицията на превъртане.

Отхвърлени опции

До v5.1.3 използвахме offset& methodопции, които сега са отхвърлени и заменени от rootMargin. За да запазим обратната съвместимост, ще продължим да анализираме дадено offsetна rootMargin, но тази функция ще бъде премахната във v6 .

Методи

Метод	Описание
`dispose`	Унищожава scrollspy на елемент. (Премахва съхранените данни в 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...
})

Scrollspy

Как работи

Примери

Навигационна лента

Първо заглавие

Второ заглавие

Трето заглавие

Четвърто заглавие

Пето заглавие

Вложена навигация

Точка 1

Позиция 1-1

Позиция 1-2

Точка 2

Точка 3

Позиция 3-1

Позиция 3-2

Списъчна група

Точка 1

Точка 2

Точка 3

Точка 4

Обикновени котви

Точка 1

Точка 2

Точка 3

Точка 4

Точка 5

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

Използване

Чрез атрибути на данни

Чрез JavaScript

Настроики

Методи

събития