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.
Hogyan működik
A Scrollspy-nek néhány követelménye van a megfelelő működéshez:
- Egy Bootstrap navigációs komponensen vagy listacsoporton kell használni .
- A Scrollspy megköveteli
position: relative;
a kémkedni kívánt elemet, általában a<body>
. - A horgonyok (
<a>
) kötelezőek, és egy elemre kell mutatniuk azzalid
.
Sikeres megvalósítás esetén a navigációs vagy listacsoport ennek megfelelően frissül, és az .active
osztályt egyik elemről a másikra helyezi át a hozzájuk tartozó célok alapján.
Görgethető tárolók és billentyűzet hozzáférés
Ha görgethető tárolót készít (a tárolótól eltérő <body>
), győződjön meg róla, hogy rendelkezik egy height
készlettel, és overflow-y: scroll;
alkalmazza azt – a gomb mellett a tabindex="0"
billentyűzet hozzáférésének biztosítása érdekében.
Példa a navigációs sávban
Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. A legördülő menüelemek is kiemelve lesznek.
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 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élda beágyazott navigációra
.nav
A Scrollspy beágyazott s -ekkel is működik . Ha egy beágyazott , .nav
akkor .active
a 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.
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.
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.
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.
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.
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.
<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élda listacsoporttal
A Scrollspy 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 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>
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 attribútumot bármely Bootstrap összetevő data-bs-target
szülőelemének azonosítójával vagy osztályával ..nav
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>
JavaScripten keresztül
Miután hozzáadta position: relative;
a CSS-t, hívja meg a scrollspy-t JavaScripten keresztül:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Feloldható azonosító célok szükségesek
A navigációs sáv hivatkozásainak feloldható azonosítócélokkal kell rendelkezniük. Például egy <a href="#home">home</a>
meg kell felelnie valaminek a DOM-ban, például <div id="home"></div>
.
A nem látható célelemek figyelmen kívül hagyva
A nem látható célelemeket figyelmen kívül hagyja, és a megfelelő navigációs elemek soha nem lesznek kiemelve.
Mód
Frissítés
Ha a scrollspy-t a DOM-elemek hozzáadásával vagy eltávolításával együtt használja, meg kell hívnia a frissítési metódust, például:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
eldob
Elpusztítja egy elem scrollspy-jét. (Eltávolítja a DOM elemen tárolt adatokat)
getInstance
Statikus módszer, amely lehetővé teszi a scrollspy példányok DOM elemhez társítását
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statikus módszer, amely lehetővé teszi a scrollspy példány lekérését egy DOM elemhez, vagy új létrehozását, ha nem inicializálták
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Lehetőségek
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-
következőhöz: data-bs-offset=""
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
offset |
szám | 10 |
Felülről eltolandó képpontok a görgetés helyzetének kiszámításakor. |
method |
húr | auto |
Megkeresi, hogy a kémelem melyik szakaszban van. auto kiválasztja a legjobb módszert a görgetési koordináták lekéréséhez. offset a módszert fogja használni a Element.getBoundingClientRect() görgetési koordináták lekéréséhez. a és tulajdonságokat position fogja használni a görgetési koordináták lekéréséhez.HTMLElement.offsetTop HTMLElement.offsetLeft |
target |
húr | jQuery objektum | DOM elem | Megadja az elemet a Scrollspy beépülő modul alkalmazásához. |
Események
Esemény típus | Leírás |
---|---|
activate.bs.scrollspy |
Ez az esemény a scroll elemen aktiválódik, amikor egy új elemet aktivál a scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})