in English

Scrollspy

Automaticky aktualizujte navigáciu Bootstrap alebo zoznam komponentov skupiny na základe pozície posúvania, aby ste označili, ktoré prepojenie je momentálne aktívne vo výreze.

Na tejto stránke

Ako to funguje

Scrollspy má niekoľko požiadaviek, aby správne fungoval:

Musí sa použiť na komponente Bootstrap nav alebo skupine zoznamov .
Scrollspy vyžaduje position: relative;na prvku, ktorý špehujete, zvyčajne <body>.
Kotvy ( <a>) sú povinné a musia ukazovať na prvok s tým id.

Po úspešnej implementácii sa vaša navigačná skupina alebo skupina zoznamov zodpovedajúcim spôsobom aktualizuje a presunie .activetriedu z jednej položky na ďalšiu na základe ich priradených cieľov.

Posúvateľné kontajnery a prístup z klávesnice

Ak vytvárate rolovateľný kontajner (iný ako <body>), uistite sa, že máte heightsadu a overflow-y: scroll;aplikovanú na ňu – spolu s a tabindex="0", aby ste zabezpečili prístup z klávesnice.

Prejdite oblasťou pod navigačnou lištou a sledujte, ako sa aktívna trieda mení. Rozbaľovacie položky budú tiež zvýraznené.

Prvý nadpis

Toto je nejaký zástupný obsah pre stránku scrollspy. Upozorňujeme, že pri posúvaní stránky nadol sa zvýrazní príslušný navigačný odkaz. Opakuje sa v celom príklade komponentu. Stále pridávame niekoľko ďalších vzorových kópií, aby sme zdôraznili posúvanie a zvýrazňovanie.

Druhý nadpis

Tretí nadpis

Štvrtý nadpis

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

Príklad s vnorenou navig

Scrollspy funguje aj s vnorenými .navs. .navAk je vnorený .active, jeho rodičia budú tiež .active. Prejdite oblasťou vedľa navigačného panela a sledujte, ako sa aktívna trieda mení.

Položka 1

Položka 1-1

Položka 1-2

Položka 2

Bod 3

Položka 3-1

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

Príklad so skupinou zoznamu

Scrollspy funguje aj so .list-groups. Prejdite oblasťou vedľa skupiny zoznamov a sledujte, ako sa aktívna trieda mení.

Položka 1 Položka 2 Bod 3 Bod 4

Položka 1

Položka 2

Bod 3

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

Cez dátové atribúty

Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, pridajte data-bs-spy="scroll"prvok, ktorý chcete špehovať (najčastejšie to bude <body>). Potom pridajte data-bs-targetatribút s ID alebo triedou nadradeného prvku ľubovoľného .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>

Cez JavaScript

Po pridaní position: relative;CSS zavolajte scrollspy cez JavaScript:

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

Vyžadujú sa rozlíšiteľné ciele ID

Odkazy na navigačnom paneli musia mať rozlíšiteľné ciele ID. Napríklad <a href="#home">home</a>musí zodpovedať niečomu v DOM, ako je <div id="home"></div>.

Neviditeľné cieľové prvky sú ignorované

Cieľové prvky, ktoré nie sú viditeľné, budú ignorované a ich zodpovedajúce navigačné položky nebudú nikdy zvýraznené.

Metódy

Obnoviť

Keď používate scrollspy v spojení s pridávaním alebo odstraňovaním prvkov z DOM, budete musieť zavolať metódu refresh takto:

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

disponovať

Zničí scrollspy prvku. (Odstráni uložené údaje v prvku DOM)

getInstance

Statická metóda, ktorá vám umožňuje získať inštanciu scrollspy spojenú s prvkom DOM

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

getOrCreateInstance

Statická metóda, ktorá vám umožňuje získať rolovaciu inštanciu spojenú s prvkom DOM alebo vytvoriť novú v prípade, že nebola inicializovaná

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-bs-, ako v data-bs-offset="".

názov	Typ	Predvolené	Popis
`offset`	číslo	`10`	Pixely na odsadenie zhora pri výpočte polohy rolovania.
`method`	reťazec	`auto`	Zistí, v ktorej sekcii sa nachádza sledovaný prvok. Vyberie `auto`najlepšiu metódu na získanie súradníc rolovania. `offset`použije `Element.getBoundingClientRect()`metódu na získanie rolovacích súradníc. `position`použije vlastnosti `HTMLElement.offsetTop`a `HTMLElement.offsetLeft`na získanie súradníc posúvania.
`target`	reťazec \| objekt jQuery \| prvok DOM		Určuje prvok, na ktorý sa má použiť doplnok Scrollspy.

Diania

Typ udalosti	Popis
`activate.bs.scrollspy`	Táto udalosť sa spustí na prvku rolovania vždy, keď bude rolovacím špiónom aktivovaná nová položka.

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

Scrollspy

Ako to funguje

Posúvateľné kontajnery a prístup z klávesnice

Príklad v navigačnej lište

Prvý nadpis

Druhý nadpis

Tretí nadpis

Štvrtý nadpis

Piaty nadpis

Príklad s vnorenou navig

Položka 1

Položka 1-1

Položka 1-2

Položka 2

Bod 3

Položka 3-1

Položka 3-2

Príklad so skupinou zoznamu

Položka 1

Položka 2

Bod 3

Bod 4

Použitie

Cez dátové atribúty

Cez JavaScript

Vyžadujú sa rozlíšiteľné ciele ID

Neviditeľné cieľové prvky sú ignorované

Metódy

Obnoviť

disponovať

getInstance

getOrCreateInstance

možnosti

Diania