Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Scrollspy

Automaticky aktualizujte navigaci Bootstrap nebo seznam součástí skupiny na základě pozice posouvání, abyste označili, který odkaz je aktuálně aktivní ve výřezu.

Jak to funguje

Scrollspy má několik požadavků, aby správně fungoval:

  • Musí být použit v komponentě Bootstrap nav nebo skupině seznamů .
  • Scrollspy vyžaduje position: relative;na prvku, který špehujete, obvykle <body>.
  • Kotvy ( <a>) jsou povinné a musí ukazovat na prvek s tím id.

Po úspěšné implementaci se vaše navigace nebo skupina seznamů odpovídajícím způsobem aktualizuje a přesune .activetřídu z jedné položky na další na základě jejich přidružených cílů.

Posouvatelné kontejnery a přístup z klávesnice

Pokud vytváříte rolovatelný kontejner (jiný než <body>), ujistěte se, že máte heightsadu a overflow-y: scroll;aplikovanou na ni – spolu s a tabindex="0", abyste zajistili přístup z klávesnice.

Příklad v navigační liště

Posouvejte oblast pod navigační lištou a sledujte, jak se aktivní třída mění. Rozbalovací položky budou také zvýrazněny.

První nadpis

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Druhý nadpis

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Třetí nadpis

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Čtvrtý nadpis

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Pátý nadpis

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

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

Příklad s vnořenou navigací

Scrollspy funguje také s vnořenými .navs. Pokud je vnořený objekt .nav, .activejeho rodiče budou také .active. Posouvejte oblast vedle navigačního panelu a sledujte, jak se aktivní třída mění.

Položka 1

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 1-1

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 1-2

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 2

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 3

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Bod 3-1

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Bod 3-2

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

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

Příklad s list-group

Scrollspy také pracuje s .list-groups. Posouvejte oblast vedle skupiny seznamu a sledujte, jak se aktivní třída mění.

Položka 1

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 2

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 3

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

Položka 4

Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.

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

Používání

Prostřednictvím datových atributů

Chcete-li do navigace v horní liště snadno přidat scrollspy chování, přidejte data-bs-spy="scroll"k prvku, který chcete špehovat (nejčastěji by to byl <body>). Potom přidejte data-bs-targetatribut s ID nebo třídou nadřazeného prvku libovolné .navkomponenty 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>

Prostřednictvím JavaScriptu

Po přidání position: relative;CSS zavolejte scrollspy přes JavaScript:

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

Jsou vyžadovány rozlišitelné ID cíle

Odkazy na navigační liště musí mít řešitelné cíle id. Například <a href="#home">home</a>musí odpovídat něčemu v DOM, jako je <div id="home"></div>.

Neviditelné cílové prvky jsou ignorovány

Cílové prvky, které nejsou viditelné, budou ignorovány a jejich odpovídající navigační položky nebudou nikdy zvýrazněny.

Metody

Obnovit

Když používáte scrollspy ve spojení s přidáváním nebo odebíráním prvků z DOM, budete muset volat metodu refresh takto:

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

zlikvidovat

Zničí scrollspy prvku. (Odstraní uložená data v prvku DOM)

getInstance

Statická metoda, která vám umožní získat instanci scrollspy přidruženou k prvku DOM

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

getOrCreateInstance

Statická metoda, která vám umožní získat scrollspy instanci spojenou s prvkem DOM nebo vytvořit novou v případě, že nebyla inicializována

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-, jako v data-bs-offset="".

název Typ Výchozí Popis
offset číslo 10 Pixely k odsazení shora při výpočtu polohy posouvání.
method tětiva auto Zjistí, ve které sekci se špehovaný prvek nachází. autovybere nejlepší metodu k získání souřadnic posouvání. offsetpoužije Element.getBoundingClientRect()metodu k získání souřadnic posouvání. positionpoužije vlastnosti HTMLElement.offsetTopa HTMLElement.offsetLeftk ​​získání souřadnic posouvání.
target řetězec | objekt jQuery | prvek DOM Určuje prvek, na který se má použít plugin Scrollspy.

Události

Typ události Popis
activate.bs.scrollspy Tato událost se spustí na prvku scroll vždy, když bude scrollspy aktivována nová položka.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})