Szpieg przewijania

Automatycznie aktualizuj nawigację Bootstrap lub składniki grupy listy na podstawie pozycji przewijania, aby wskazać, które łącze jest aktualnie aktywne w rzutni.

Na tej stronie

Jak to działa

Scrollspy przełącza .activeklasę na elementy zakotwiczenia ( <a>), gdy element, do którego idodwołuje się zakotwiczenie, hrefjest przewijany do widoku. Scrollspy najlepiej jest używać w połączeniu z komponentem Bootstrap nav lub grupą list , ale działa również z dowolnymi elementami zakotwiczenia na bieżącej stronie. Oto jak to działa.

Na początek scrollspy wymaga dwóch rzeczy: nawigacji, grupy list lub prostego zestawu linków oraz przewijalnego kontenera. Kontenerem przewijalnym może być element <body>lub niestandardowy element z zestawem heighti overflow-y: scroll.
W kontenerze przewijalnym dodaj data-bs-spy="scroll"i data-bs-target="#navId"gdzie navIdjest unikatem idpowiązanej nawigacji. Pamiętaj, aby dołączyć również , tabindex="0"aby zapewnić dostęp z klawiatury.
Podczas przewijania kontenera „szpiegów” .activeklasa jest dodawana i usuwana z linków zakotwiczonych w powiązanej nawigacji. Linki muszą mieć możliwe do rozwiązania idcele, w przeciwnym razie zostaną zignorowane. Na przykład <a href="#home">home</a>musi odpowiadać czemuś w DOM jak<div id="home"></div>
Elementy docelowe, które nie są widoczne, zostaną zignorowane. Zobacz sekcję Elementy niewidoczne poniżej.

Przykłady

Przewiń obszar poniżej paska nawigacyjnego i obserwuj aktywną zmianę klasy. Otwórz menu rozwijane i obserwuj, jak podświetlane są również pozycje rozwijane.

Pierwszy nagłówek

To jest zawartość zastępcza dla strony scrollspy. Zwróć uwagę, że podczas przewijania strony podświetlany jest odpowiedni link nawigacyjny. Jest to powtórzone w całym przykładzie komponentu. Wciąż dodajemy tutaj więcej przykładowych kopii, aby podkreślić przewijanie i podświetlanie.

Drugi nagłówek

Trzeci nagłówek

Czwarty nagłówek

Piąty nagłówek

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

Nawigacja zagnieżdżona

Scrollspy działa również z zagnieżdżonymi .navs. Jeśli zagnieżdżony .navjest .active, jego rodzice również będą .active. Przewiń obszar obok paska nawigacyjnego i obserwuj aktywną zmianę klasy.

Przedmiot 1

Pamiętaj, że wtyczka JavaScript próbuje wybrać właściwy element spośród wszystkich, które mogą być widoczne. Wiele widocznych celów scrollspy w tym samym czasie może powodować pewne problemy.

Pozycja 1-1

Pozycja 1-2

Pozycja 2

Pozycja 3

Pozycja 3-1

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

Lista grup

Scrollspy działa również z .list-groups. Przewiń obszar obok grupy listy i obserwuj aktywną zmianę klasy.

Przedmiot 1 Pozycja 2 Pozycja 3 Pozycja 4

Przedmiot 1

Pozycja 2

Pozycja 3

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

Proste kotwice

Scrollspy nie ogranicza się do komponentów nawigacji i grup list, więc będzie działać na wszystkich <a>elementach zakotwiczenia w bieżącym dokumencie. Przewiń obszar i obserwuj .activezmianę klasy.

Przedmiot 1 Pozycja 2 Pozycja 3 Pozycja 4 Pozycja 5

Przedmiot 1

Pozycja 2

Pozycja 3

Pozycja 4

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

Niewidoczne elementy

Elementy docelowe, które nie są widoczne, zostaną zignorowane, a odpowiadające im elementy nawigacyjne nie otrzymają .activeklasy. Instancje Scrollspy zainicjowane w niewidocznym opakowaniu zignorują wszystkie elementy docelowe. Użyj refreshmetody, aby sprawdzić obserwowalne elementy, gdy opakowanie stanie się widoczne.

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()
  })
})

Stosowanie

Poprzez atrybuty danych

Aby łatwo dodać zachowanie scrollspy do nawigacji w górnym pasku, dodaj data-bs-spy="scroll"element, który chcesz szpiegować (najczęściej jest to <body>). Następnie dodaj data-bs-targetatrybut z idnazwą klasy lub elementu nadrzędnego dowolnego .navkomponentu 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>

Przez JavaScript

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

Opcje

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z „ camelCase ” na „ kebab-case ” podczas przekazywania opcji przez atrybuty danych. Na przykład użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Nazwa	Rodzaj	Domyślna	Opis
`rootMargin`	strunowy	`0px 0px -25%`	Intersection Observer rootMargin prawidłowe jednostki podczas obliczania pozycji przewijania.
`smoothScroll`	logiczne	`false`	Włącza płynne przewijanie, gdy użytkownik kliknie łącze, które odnosi się do obiektów obserwowalnych ScrollSpy.
`target`	ciąg, element DOM	`null`	Określa element do zastosowania wtyczki Scrollspy.
`threshold`	szyk	`[0.1, 0.5, 1]`	`IntersectionObserver` poprawny próg wejściowy podczas obliczania pozycji przewijania.

Przestarzałe opcje

Do wersji 5.1.3 używaliśmy offset& methodoptions, które są teraz przestarzałe i zastąpione przez rootMargin. Aby zachować kompatybilność wsteczną, będziemy nadal analizować dane offsetz rootMargin, ale ta funkcja zostanie usunięta w v6 .

Metody

metoda	Opis
`dispose`	Niszczy scrollspy elementu. (Usuwa dane zapisane w elemencie DOM)
`getInstance`	Metoda statyczna do pobrania instancji scrollspy powiązanej z elementem DOM.
`getOrCreateInstance`	Metoda statyczna , aby uzyskać instancję scrollspy skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana.
`refresh`	Podczas dodawania lub usuwania elementów w DOM musisz wywołać metodę refresh.

Oto przykład z wykorzystaniem metody odświeżania:

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

Wydarzenia

Wydarzenie	Opis
`activate.bs.scrollspy`	To zdarzenie jest uruchamiane na elemencie scroll za każdym razem, gdy kotwica jest aktywowana przez scrollspy.

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

Szpieg przewijania

Jak to działa

Przykłady

Pasek nawigacyjny

Pierwszy nagłówek

Drugi nagłówek

Trzeci nagłówek

Czwarty nagłówek

Piąty nagłówek

Nawigacja zagnieżdżona

Przedmiot 1

Pozycja 1-1

Pozycja 1-2

Pozycja 2

Pozycja 3

Pozycja 3-1

Pozycja 3-2

Lista grup

Przedmiot 1

Pozycja 2

Pozycja 3

Pozycja 4

Proste kotwice

Przedmiot 1

Pozycja 2

Pozycja 3

Pozycja 4

Pozycja 5

Niewidoczne elementy

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

Opcje

Metody

Wydarzenia