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.

Na této straně

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.

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

Třetí nadpis

Čtvrtý nadpis

Pátý nadpis

<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

Položka 1-1

Položka 1-2

Položka 2

Položka 3

Bod 3-1

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

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 Položka 2 Položka 3 Položka 4

Položka 1

Položka 2

Položka 3

Položka 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>

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í. `auto`vybere nejlepší metodu k získání souřadnic posouvání. `offset`použije `Element.getBoundingClientRect()`metodu k získání souřadnic posouvání. `position`použije vlastnosti `HTMLElement.offsetTop`a `HTMLElement.offsetLeft`k 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...
})

Scrollspy

Jak to funguje

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

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

První nadpis

Druhý nadpis

Třetí nadpis

Čtvrtý nadpis

Pátý nadpis

Příklad s vnořenou navigací

Položka 1

Položka 1-1

Položka 1-2

Položka 2

Položka 3

Bod 3-1

Bod 3-2

Příklad s list-group

Položka 1

Položka 2

Položka 3

Položka 4

Používání

Prostřednictvím datových atributů

Prostřednictvím JavaScriptu

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

Neviditelné cílové prvky jsou ignorovány

Metody

Obnovit

zlikvidovat

getInstance

getOrCreateInstance

Možnosti

Události