Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
Check
in English

Scrollspy

A Bootstrap navigáció vagy a csoport összetevőinek automatikus frissítése a görgetés pozíciója alapján, hogy jelezze, melyik hivatkozás aktív a nézetablakban.

Ezen az oldalon

Hogyan működik

A Scrollspy átkapcsolja az .activeosztályt a horgonyelemeken ( ), amikor a horgony által hivatkozott <a>elemet a nézetbe görgeti . A Scrollspy a legjobban egy Bootstrap navigációs komponenssel vagy listacsoporttal együtt használható , de az aktuális oldal bármely horgonyelemével is működik. Íme, hogyan működik.idhref

  • A scrollspy elindításához két dologra van szükség: egy navigációra, listacsoportra vagy egy egyszerű hivatkozáskészletre, valamint egy görgethető tárolóra. A görgethető tároló lehet a <body>vagy egyéni elem, egy heightés készlettel overflow-y: scroll.

  • A görgethető tárolóban adja hozzá, data-bs-spy="scroll"és data-bs-target="#navId"hol navIdtalálható a társított navigáció egyedisége id. Ügyeljen arra, hogy adjon meg egy jelet is, tabindex="0"hogy biztosítsa a billentyűzet hozzáférését.

  • Ahogy görgeti a „kémkedett” tárolót, a .activerendszer hozzáad egy osztályt, és eltávolítja a horgonyhivatkozásokat a kapcsolódó navigációban. A hivatkozásoknak feloldható idcélokkal kell rendelkezniük, különben figyelmen kívül hagyják őket. Például egy <a href="#home">home</a>meg kell felelnie valaminek a DOM-ban, mint például<div id="home"></div>

  • A nem látható célelemeket figyelmen kívül hagyja. Lásd alább a Nem látható elemek részt.

Példák

Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. Nyissa meg a legördülő menüt, és figyelje, hogy a legördülő elemek is kiemelve legyenek.

Első címsor

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Második címsor

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Harmadik címsor

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Negyedik címsor

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ötödik címsor

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

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

Beágyazott navigációs rendszer

.navA Scrollspy beágyazott s -ekkel is működik . Ha egy beágyazott , .navakkor .activea szülei is azok lesznek .active. Görgessen a navigációs sáv melletti területen, és figyelje az aktív osztály változását.

1. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

1-1

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

1-2

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

2. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

3. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

3-1

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

3-2

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

Ne feledje, hogy a JavaScript beépülő modul megpróbálja kiválasztani a megfelelő elemet a látható elemek közül. Egyszerre több látható scrollspy célpont problémákat okozhat.

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

Listacsoport

A Scrollspy az s-vel is működik .list-group. Görgessen a listacsoport melletti területen, és figyelje az aktív osztály változását.

1. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

2. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

3. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

4. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

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

Egyszerű horgonyok

A Scrollspy nem korlátozódik a navigációs összetevőkre és listacsoportokra, így <a>az aktuális dokumentum bármely horgonyelemén működik. Görgesd végig a területet, és figyeld az .activeosztály változását.

1. tétel 2. tétel 3. tétel 4. tétel 5. tétel

1. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

2. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

3. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

4. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

5. tétel

Ez egy helyőrző tartalom a scrollspy oldalhoz. Ne feledje, hogy az oldalon lefelé görgetés közben a megfelelő navigációs hivatkozás kiemelve jelenik meg. Ez megismétlődik a komponenspéldában. Folyamatosan hozzáadunk néhány példapéldányt, hogy hangsúlyozzuk a görgetést és a kiemelést.

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

Nem látható elemek

A nem látható célelemek figyelmen kívül maradnak, és a hozzájuk tartozó navigációs elemek nem kapnak .activeosztályt. A nem látható burkolóban inicializált Scrollspy példányok figyelmen kívül hagynak minden célelemet. Használja a refreshmódszert a megfigyelhető elemek ellenőrzésére, amint a burkoló láthatóvá válik.

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

Használat

Adatattribútumokon keresztül

A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához adja hozzá data-bs-spy="scroll"azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a <body>). Ezután adja hozzá az data-bs-targetattribútumot bármely Bootstrap- összetevő idszülőelemének vagy osztálynevével ..nav

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScripten keresztül

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

Lehetőségek

Mivel az opciók átadhatók adatattribútumokon vagy JavaScript-en keresztül, hozzáfűzhet egy beállításnevet a -hoz data-bs-, mint például a data-bs-animation="{value}". Ügyeljen arra, hogy az opció nevének esettípusát „ camelCase ”-ról „ kebab-case ”-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például használja data-bs-custom-class="beautifier"a helyett data-bs-customClass="beautifier".

A Bootstrap 5.2.0-tól kezdve minden összetevő támogatja a kísérleti fenntartott adatattribútumot, data-bs-configamely JSON-karakterláncként tartalmazhat egyszerű összetevőkonfigurációt. Ha egy elemnek data-bs-config='{"delay":0, "title":123}'és data-bs-title="456"attribútumai vannak, a végső titleérték a következő lesz, 456és a különálló adatattribútumok felülírják a megadott értékeket data-bs-config. Ezenkívül a meglévő adatattribútumok JSON-értékeket, például data-bs-delay='{"show":0,"hide":150}'.

Név típus Alapértelmezett Leírás
rootMargin húr 0px 0px -25% Intersection Observer rootMargin érvényes mértékegységek a görgetési pozíció kiszámításakor.
smoothScroll logikai érték false Lehetővé teszi a zökkenőmentes görgetést, amikor a felhasználó a ScrollSpy megfigyelhető elemeire hivatkozó hivatkozásra kattint.
target karakterlánc, DOM elem null Megadja az elemet a Scrollspy beépülő modul alkalmazásához.
threshold sor [0.1, 0.5, 1] IntersectionObserver küszöbérték érvényes bemenet, a görgetési pozíció kiszámításakor.

Elavult beállítások

A v5.1.3-ig a offset& methodopciókat használtuk, amelyek mára elavulttá váltak, és helyettük a rootMargin. A visszamenőleges kompatibilitás megőrzése érdekében továbbra is elemezni fogjuk az adott értéket offset, de ez a funkció a 6-os verzióbanrootMargin megszűnik .

Mód

Módszer Leírás
dispose Elpusztítja egy elem scrollspy-jét. (Eltávolítja a DOM elemen tárolt adatokat)
getInstance Statikus módszer egy DOM-elemhez társított scrollspy-példány lekéréséhez.
getOrCreateInstance Statikus módszer a scrollspy példány DOM-elemhez társítására, vagy új létrehozására, ha nem inicializálták.
refresh Amikor elemeket ad hozzá vagy eltávolít a DOM-ban, meg kell hívnia a frissítési metódust.

Íme egy példa a frissítési módszer használatára:

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

Események

Esemény Leírás
activate.bs.scrollspy Ez az esemény a scroll elemen tüzel, amikor egy horgonyt aktivál a scrollspy. 
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})