Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Scrollspy

Päivitä Bootstrap-navigointi- tai luetteloryhmäkomponentit automaattisesti vierityksen sijainnin perusteella osoittamaan, mikä linkki on tällä hetkellä aktiivinen katseluportissa.

Tällä sivulla

Kuinka se toimii

Scrollspy vaihtaa .activeluokkaa ankkurielementeillä ( <a>), kun elementti, johon idankkurin viittaus hrefon vieritetty näkyville. Scrollspyä käytetään parhaiten Bootstrap- navigointikomponentin tai -luetteloryhmän kanssa , mutta se toimii myös kaikkien nykyisen sivun ankkurielementtien kanssa. Näin se toimii.

  • Aloita scrollspy vaatii kaksi asiaa: navigoinnin, luetteloryhmän tai yksinkertaisen linkkijoukon sekä vieritettävän säilön. Vieritettävä säilö voi olla <body>tai mukautettu elementti, jossa on joukko heightja overflow-y: scroll.

  • Lisää vieritettävään säilöyn liittyvän navigoinnin ainutlaatuisuus data-bs-spy="scroll"ja data-bs-target="#navId"missä on. Muista lisätä myös a varmistaaksesi näppäimistön käytön.navIdidtabindex="0"

  • Kun vierität "vakoilua" -säilöä, .activeluokka lisätään ja poistetaan ankkurilinkeistä liittyvässä navigaatiossa. Linkeillä on oltava ratkaistavissa olevat idkohteet, muuten ne ohitetaan. Esimerkiksi <a href="#home">home</a>on vastattava jotain DOM kuten<div id="home"></div>

  • Kohdeelementit, jotka eivät ole näkyvissä, ohitetaan. Katso Ei-näkyvät elementit -osio alla.

Esimerkkejä

Vieritä navigointipalkin alla olevaa aluetta ja seuraa aktiivisen luokan muutosta. Avaa pudotusvalikko ja katso, että 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 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>

Sisäkkäinen nav

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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.

Muista, että JavaScript-laajennus yrittää valita oikean elementin kaikista mahdollisesti näkyvistä. Useat näkyvät scrollspy-kohteet samanaikaisesti voivat aiheuttaa ongelmia.

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

Listaa ryhmä

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

Yksinkertaiset ankkurit

Scrollspy ei rajoitu navigointikomponentteihin ja luetteloryhmiin, joten se toimii kaikissa <a>nykyisen asiakirjan ankkurielementeissä. Vieritä aluetta ja katso .activeluokan muutosta.

Kohde 1 Kohde 2 Kohde 3 Kohde 4 Kohde 5

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.

Kohde 5

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

Näkymättömiä elementtejä

Kohdeelementit, jotka eivät ole näkyvissä, ohitetaan, eivätkä niitä vastaavat navigointikohteet saa .activeluokkaa. Scrollspy-esiintymät, jotka on alustettu näkymättömään kääreeseen, ohittavat kaikki kohdeelementit. Käytä refreshmenetelmää tarkistaaksesi havaittavissa olevat elementit, kun kääre tulee näkyviin.

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

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 data-bs-targetattribuutti minkä tahansa Bootstrap- komponentin idpääelementin tai luokan nimen kanssa ..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>

JavaScriptin kautta

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

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Nimi Tyyppi Oletus Kuvaus
rootMargin merkkijono 0px 0px -25% Intersection Observer rootMargin kelvolliset yksiköt, kun lasketaan vierityskohtaa.
smoothScroll boolean false Mahdollistaa sujuvan vierityksen, kun käyttäjä napsauttaa linkkiä, joka viittaa ScrollSpy-havaintoja koskeviin tietoihin.
target merkkijono, DOM-elementti null Määrittää elementin, jota käytetään Scrollspy-laajennuksessa.
threshold joukko [0.1, 0.5, 1] IntersectionObserver kynnysarvo kelvollinen syöte, kun lasketaan vierityskohtaa.

Vanhentuneet asetukset

Vuoteen 5.1.3 asti käytimme offset& -asetuksia method, jotka on nyt vanhentuneita ja korvattu versiolla rootMargin. Taaksepäin yhteensopivuuden säilyttämiseksi jatkamme annetun jäsennystä offsettiedostoon rootMargin, mutta tämä ominaisuus poistetaan versiosta 6 .

menetelmät

Menetelmä Kuvaus
dispose Tuhoaa elementin scrollspyn. (Poistaa DOM-elementtiin tallennetut tiedot)
getInstance Staattinen menetelmä DOM-elementtiin liittyvän scrollspy-esiintymän saamiseksi.
getOrCreateInstance Staattinen menetelmä saada scrollspy-ilmentymä liitettynä DOM-elementtiin tai luoda uusi, jos sitä ei alustettu.
refresh Kun lisäät tai poistat elementtejä DOM:iin, sinun on kutsuttava päivitysmenetelmä.

Tässä on esimerkki päivitysmenetelmästä:

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

Tapahtumat

Tapahtuma Kuvaus
activate.bs.scrollspy Tämä tapahtuma laukaisee vierityselementin aina, kun scrollspy aktivoi ankkurin. 
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})