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 ma kilka wymagań, aby działać poprawnie:

Musi być używany w komponencie Bootstrap nav lub grupie list .
Scrollspy wymaga position: relative;na elemencie, który szpiegujesz, zwykle <body>.
Kotwice ( <a>) są wymagane i muszą wskazywać na element z tym id.

Po pomyślnym wdrożeniu twoja nawigacja lub grupa listy zostaną odpowiednio zaktualizowane, przenosząc .activeklasę z jednego elementu do następnego na podstawie powiązanych z nimi celów.

Przewijalne kontenery i dostęp z klawiatury

Jeśli tworzysz kontener przewijalny (inny niż <body>), upewnij się, że masz heightzestaw i overflow-y: scroll;zastosowano do niego — obok znaku, tabindex="0"aby zapewnić dostęp z klawiatury.

Przewiń obszar poniżej paska nawigacyjnego i obserwuj aktywną zmianę klasy. Pozycje rozwijane również zostaną podświetlone.

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 navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>

Przykład z zagnieżdżoną nav

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

Pozycja 1-1

Pozycja 1-2

Pozycja 2

Pozycja 3

Pozycja 3-1

Pozycja 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Przykład z list-group

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 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 data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" 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>

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 identyfikatorem lub klasą elementu nadrzędnego dowolnego .navkomponentu Bootstrap.

body {
  position: relative;
}

<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

Po dodaniu position: relative;kodu CSS wywołaj scrollspy przez JavaScript:

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

Wymagane identyfikowalne cele identyfikacyjne

Linki paska nawigacyjnego muszą mieć rozpoznawalne cele id. Na przykład <a href="#home">home</a>musi odpowiadać czemuś w DOM jak <div id="home"></div>.

Zignorowano niewidoczne elementy docelowe

Elementy docelowe, które nie są widoczne, zostaną zignorowane, a odpowiadające im elementy nawigacyjne nigdy nie zostaną podświetlone.

Metody

odświeżać

Używając scrollspy w połączeniu z dodawaniem lub usuwaniem elementów z DOM, musisz wywołać metodę refresh w następujący sposób:

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

dysponować

Niszczy scrollspy elementu. (Usuwa dane zapisane w elemencie DOM)

uzyskac instancje

Metoda statyczna , która pozwala uzyskać instancję scrollspy powiązaną z elementem DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Metoda statyczna , która pozwala uzyskać instancję scrollspy powiązaną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-offset="".

Nazwa	Rodzaj	Domyślna	Opis
`offset`	numer	`10`	Piksele do przesunięcia od góry podczas obliczania pozycji przewijania.
`method`	strunowy	`auto`	Sprawdza, w której sekcji znajduje się szpiegowany element. `auto`wybierze najlepszą metodę, aby uzyskać współrzędne przewijania. `offset`użyje `Element.getBoundingClientRect()`metody, aby uzyskać współrzędne przewijania. `position`użyje właściwości `HTMLElement.offsetTop`i `HTMLElement.offsetLeft`do uzyskania współrzędnych przewijania.
`target`	ciąg \| jQuery obiekt \| element DOM		Określa element do zastosowania wtyczki Scrollspy.

Wydarzenia

Typ wydarzenia	Opis
`activate.bs.scrollspy`	To zdarzenie uruchamia się na elemencie scroll, gdy tylko nowy przedmiot zostanie aktywowany przez scrollspy.

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

Szpieg przewijania

Jak to działa

Przewijalne kontenery i dostęp z klawiatury

Przykład w pasku nawigacyjnym

Pierwszy nagłówek

Drugi nagłówek

Trzeci nagłówek

Czwarty nagłówek

Piąty nagłówek

Przykład z zagnieżdżoną nav

Przedmiot 1

Pozycja 1-1

Pozycja 1-2

Pozycja 2

Pozycja 3

Pozycja 3-1

Pozycja 3-2

Przykład z list-group

Przedmiot 1

Pozycja 2

Pozycja 3

Pozycja 4

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

Wymagane identyfikowalne cele identyfikacyjne

Zignorowano niewidoczne elementy docelowe

Metody

odświeżać

dysponować

uzyskac instancje

getOrCreateInstance

Opcje

Wydarzenia