Scrollspy
Päivitä Bootstrap-navigointi- tai luetteloryhmäkomponentit automaattisesti vierityksen sijainnin perusteella osoittamaan, mikä linkki on tällä hetkellä aktiivinen katseluportissa.
Kuinka se toimii
Scrollspyllä on muutamia vaatimuksia toimiakseen oikein:
- Sitä on käytettävä Bootstrap- navigointikomponentissa tai -luetteloryhmässä .
- Scrollspy vaatii
position: relative;vakoilemasi elementin, yleensä<body>. - Ankkurit (
<a>) ovat pakollisia, ja niiden on osoitettava elementtiin, jolla onid.
Kun se on otettu käyttöön onnistuneesti, navigointi- tai luetteloryhmäsi päivittyy vastaavasti ja siirtää .activeluokan kohteesta toiseen niihin liittyvien tavoitteiden perusteella.
Vieritettävät säiliöt ja pääsy näppäimistöön
Jos teet vieritettävää säilöä (muuta kuin <body>), varmista, että sinulla on heightjoukko ja käytät sitä overflow-y: scroll;– symbolin rinnalla tabindex="0"varmistaaksesi näppäimistön käytön.
Esimerkki navigointipalkissa
Vieritä navigointipalkin alla olevaa aluetta ja seuraa aktiivisen luokan muutosta. Myös pudotusvalikon kohteet korostetaan.
Ensimmäinen otsikko
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Toinen otsikko
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kolmas otsikko
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Neljäs otsikko
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Viides otsikko
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
<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>
Esimerkki sisäkkäisestä navista
Scrollspy toimii myös sisäkkäisten .navs:n kanssa. Jos sisäkkäinen .navon .active, myös sen vanhemmat ovat .active. Vieritä navigointipalkin vieressä olevaa aluetta ja katso aktiivisen luokan muutosta.
Kohde 1
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohta 1-1
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohta 1-2
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohde 2
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohde 3
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohta 3-1
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohta 3-2
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
<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>
Esimerkki listaryhmästä
Scrollspy toimii myös .list-groups:n kanssa. Vieritä luetteloryhmän vieressä olevaa aluetta ja seuraa aktiivisen luokan muutosta.
Kohde 1
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohde 2
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohde 3
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
Kohde 4
Tämä on paikkamerkkisisältöä scrollspy-sivulle. Huomaa, että kun vierität sivua alaspäin, oikea navigointilinkki näkyy korostettuna. Se toistetaan koko komponenttiesimerkissä. Lisäämme tänne lisää esimerkkikopioita korostaaksemme vieritystä ja korostusta.
<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>
Käyttö
Tietomääritteiden kautta
Voit helposti lisätä scrollspy-käyttäytymistä yläpalkin navigointiin lisäämällä data-bs-spy="scroll"elementtiin, jota haluat vakoilla (yleensä tämä on <body>). Lisää sitten attribuutti minkä tahansa Bootstrap- komponentin data-bs-targetpääelementin tunnuksella tai luokalla ..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>
JavaScriptin kautta
Kun olet lisännyt position: relative;CSS:n, kutsu scrollspylle JavaScriptin kautta:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Ratkaisevat tunnuskohteet vaaditaan
Navigointipalkin linkeillä on oltava selvitettävät tunnistekohteet. Esimerkiksi <a href="#home">home</a>on vastattava jotain DOM:ssa, kuten <div id="home"></div>.
Ei-näkyvät kohdeelementit ohitettu
Kohdeelementit, jotka eivät ole näkyvissä, ohitetaan, eikä niitä vastaavia navigointikohteita korosteta koskaan.
menetelmät
virkistää
Kun käytät scrollspyä yhdessä elementtien lisäämisen tai poistamisen kanssa DOM:sta, sinun on kutsuttava päivitysmenetelmä seuraavasti:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
hävittää
Tuhoaa elementin scrollspyn. (Poistaa DOM-elementtiin tallennetut tiedot)
getInstance
Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän scrollspy-ilmentymän
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Staattinen menetelmä, jonka avulla voit saada scrollspy-esiintymän, joka liittyy DOM-elementtiin, tai luoda uuden, jos sitä ei alustettu
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-, kuten kohdassa data-bs-offset="".
| Nimi | Tyyppi | Oletus | Kuvaus |
|---|---|---|---|
offset |
määrä | 10 |
Pikselit siirtymään ylhäältä, kun lasketaan vierityskohtaa. |
method |
merkkijono | auto |
Etsii, missä osiossa vakoiluelementti on. Valitsee autoparhaan tavan saada vierityskoordinaatit. offsetkäyttää Element.getBoundingClientRect()menetelmää vierityskoordinaattien saamiseksi. positionkäyttää HTMLElement.offsetTopja HTMLElement.offsetLeftominaisuuksia saadakseen vierityskoordinaatit. |
target |
merkkijono | jQuery-objekti | DOM-elementti | Määrittää elementin, jota käytetään Scrollspy-laajennuksessa. |
Tapahtumat
| Tapahtumatyyppi | Kuvaus |
|---|---|
activate.bs.scrollspy |
Tämä tapahtuma käynnistyy vierityselementissä aina, kun scrollspy aktivoi uuden kohteen. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})